Changing an SVG marker's color - CSS?

svg marker context-stroke
svg marker text
svg marker event
svg image marker
marker-end d3
marker arrow
svg path
marker html

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.

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.

styling SVG markers, appends CSS for each color to the stylesheet; clones svg markers for .replace('​color-path ', ''); var nextHsl = nextColor(colorClass); path. Change map style at runtime ; Set a map style at the load time ; Interactive base map ; Interleave vector and object layers ; Markers . Marker on the Map ; DOM Marker ; SVG Graphic Markers ; Finding the Nearest Marker ; Zooming to a Set of Markers ; Draggable Marker ; DOM Marker rotation ; Markers with Altitude ; Animated Markers ; Geoshapes

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/

Painting: Filling, Stroking and Marker Symbols, This is changed from SVG 1.1 behavior where the document is in error if a paint server reference is invalid and there is no fallback color specified. <rect width="​100  We should now have one svg:marker more under the node svg:defs. In my case the new marker has id marker6492. Let us rename the id of that marker from marker6492 to Arrow2LendRed. You can do that by clicking on the id property, changing the value in the textarea and pushing the Set button. Edit the style of the marker node. Open the new marker node and click on the containing svg:path node.

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.

marker-end, The marker-end attribute defines the arrowhead or polymarker that will <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id=​"triangle" Candidate Recommendation, No significant change. This attribute defines the orientation of the marker relative to the shape it is attached to. Value type: auto|auto-start-reverse|<angle> ; Default value: 0; Animatable: yes. preserveAspectRatio. This attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.

marker-mid, The marker-mid attribute defines the arrowhead or polymarker that will be <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id=​"circle" Candidate Recommendation, No significant change. 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

SVG marker element, SVG markers are used to mark the start, mid and end of a line or path. For instance, you can have a circle or square mark the beginning of the  Leaflet Markers are stored as files unlike other objects (like Polylines, etc.) If you want your own markers, you can find The official Leaflet Tutorial that explains how to do it. EDIT : After reading this conversation with the main developer I searched for the marker SVG and here it is.

SVG Markers, The marker knockout properties are still under heavy development and are subject to change. Feedback on how  It is possible to script SVG using JavaScript. Via scripting you can modify the SVG elements, animate them, or listen for mouse events on the shapes. When SVG is embedded in an HTML page, you can work with SVG elements in JavaScript just as if they were HTML elements. The JavaScript looks the same.

Comments