36

I've seen a number of examples of using CSS to affect the style of SVG elements, but none so far that help with my question about markers. And honestly, I'm still working through the syntax of both(SVG & CSS).

I want to define a marker, and then be able to use it in various places but with different colors.

For example:

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
     viewBox="0 0 180 320">

<defs>
    <marker class="AsteriskMarkerClass" id="AsteriskMarker" viewBox="-1 -1 2 2" stroke-width="0.1">
        <line x1="0" y1="-1" x2="0" y2="1" />
        <line x1="-1" y1="0" x2="1" y2="0" /> 
        <line x1="-0.7071" y1="-0.7071" x2="0.7071" y2="0.7071" />
        <line x1="-0.7071" y1="0.7071"  x2="0.7071" y2="-0.7071" />
    </marker>
</defs>

.AsteriskMarkerClass { stroke:red; }
    <path d="M 60,100"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

.AsteriskMarkerClass { color:green; }
    <path d="M 90,140"
          stroke-width="10"
          marker-start="url(#AsteriskMarker)" />

</svg>

If someone could give me tip on how this might be done, I would appreciate it.

2
  • 4
    It's not currently possible but something is being considered for the upcoming SVG 2 specification I think. May 21, 2013 at 8:23
  • Currently you can use javascript to clone and change color for each different style of marker.
    – cuixiping
    Mar 10, 2017 at 10:59

3 Answers 3

29

As Robert wrote, it's not possible in SVG 1.1:

From the SVG 1.1 spec:

Properties inherit into the ‘marker’ element from its ancestors; properties do not inherit from the element referencing the ‘marker’ element.

SVG2 does allow you to say that you want the style from the referencing element:

Properties inherit into the ‘marker’ element from its ancestors; properties do not inherit from the element referencing the ‘marker’ element. Note however that by using the context-stroke value for the ‘fill’ or ‘stroke’ on elements in its definition, a single marker can be designed to match the style of the element referencing the marker.

See example 2 in this section of the spec for how that can be used. Do note that this is an editor's draft, and that the syntax may still change. Implementations of context-fill and context-stroke is not yet in all browsers. If you're looking for something to test in, it seems to be implemented with a prefix (possibly behind a pref flag, I'm not exactly clear on which flag, but possibly gfx.font_rendering.opentype_svg.enabled) in Firefox Nightlies, see WG discussion here.

3
14

My solution was to define 2 markers and pick the correct one in css.

<html>
    <head>
        <style>
            #arrow {
                stroke: #000000;
                fill: #000000;
            }
            #hover-arrow {
                stroke: #98dfd9;
                fill: #98dfd9;
            }
            .edge{
                position: absolute;
                stroke: #000;
                marker: #000;
                fill: #000;
            }
            .edge-out-dir{
                stroke-width: 1;
                marker-end: url("#arrow")
            }
            .edge:hover{
                stroke: #98dfd9;
            }
            .edge:hover .edge-out-dir{
                marker-end: url("#hover-arrow")
            }
        </style>
    </head>
    <body>
        <svg>
            <defs>
                <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" /></marker>
                <marker id="hover-arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" /></marker>
            </defs>
        </svg>


        <svg width="276px" height="100px" class="edge" style="left: 466px; top: 228px;">
            <line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
            </line>
        </svg>
        <svg width="276px" height="100px" class="edge" style="left: 466px; top: 428px;">
            <line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
            </line>
        </svg>
    </body>
</html>

https://jsfiddle.net/mo3eLsgf/

2
  • 1
    This is very unsatisfying (but of course it's the standard's fault, not yours). The two marker definitions inside the defs element are like 90% identical. It's as if SVG is some kind of conspiracy to keep code soaking wet (as opposed to DRY).
    – Lori
    Jan 14, 2021 at 17:30
  • 2
    @Lori LOL... This is just to make clear how it works. The advantage is that you CAN change the appearance. I don't really worry about the extra line of code... The SVG will save tons of bytes from not including a PNG.
    – Joeri
    Jan 15, 2021 at 20:38
2

You can create different defs for marker based on the input data, then call this marker by id at the end of the path.

This is an example that works well: https://bl.ocks.org/denisemauldin/d797804c235365526e8b85c3081c4271

I have tried this for my case and it works too. Hope this helps.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.