W3C home > Mailing lists > Public > public-svg-wg@w3.org > January to March 2011

Markers and currentColor

From: Tavmjong Bah <tavmjong@free.fr>
Date: Wed, 02 Mar 2011 20:52:01 +0100
To: public-svg-wg@w3.org
Message-ID: <1299095521.1806.173.camel@LeChien>


	As promised at the Feb. 16th WG meeting, I have come up with a proposal
to address the issue of marker colors not matching path color. I think
the change to the spec is very simple, consisting of adding just one
sentance that clarifies how "currentColor" is handled by markers.



One of the most common complaints by Inkscape users is that the arrow
head color doesn't match the color of the arrow path. This problem
results from SVG 1.1 not providing a clear way to specify that a
marker's fill should be the same as the stroke color of the path. As a
work-around, Inkscape provides a macro that does change the color of the
head to match the path by creating a copy of the marker for each desired
color in the <defs> section of the SVG file. This not only requires
extra steps by the Inkscape user but also can result in a large number
of entries in the <defs> section.


It would be much more natural to provide a method in the SVG
specification to allow a marker fill and/or stroke to take the color of
the path to which it is attached. This is a recognized problem for which
a complete solution is planned for SVG 2.0. This proposal addresses the
problem in a relatively simple way that requires only a "clarification"
in the SVG 1.1 specification.

To see how this is done, consider the marker property "markerUnits"
which can have the value "strokeWidth". This is a property that is
specified at the point where the marker is defined, but evaluated at the
point where the marker is used. The use of "currentColor" should follow
this example. Currently, the Marker section of the SVG specification
does not define how "currentColor" should be evaluated (nor do the
Gradient or Pattern sections). I propose adding a sentence after the one
that begins "Properties inherit into the 'marker' element..." so that
the paragraph reads:

    Properties inherit into the ‘marker’ element from its ancestors;
    properties do not inherit from the element referencing the
    ‘marker’ element. If a child element in the marker has a property
    or style attribute with a value of "currentColor" and an ancestor
    of that child element in the marker or the marker itself does not
    specify a value for <color>, the marker shall use the value of
    <color> obtained from the element referencing the 'marker' element.
The second sentence does not conflict with the first sentence as the
marker is not inheriting, per se, the color from the referencing
element. The value of a property with the value "currentColor" remains
"currentColor". This can be illustrated by the following fragment:

<g color="red">
   <g fill="currentColor">
     <path .../>

The path does is not inheriting a fill value of "red", it is inheriting
a fill value of "currentColor", which when evaluated happens to be red.
It was suggested at one point in the discussion that there might be a
problem with CSS styling and the DOM tree when a marker that uses
"currentColor" appears on paths with different "color" values. But there
should not be a problem, as "color" is not the value of a property of
something inside the marker; the value of the property inside the marker
is "currentColor" which remains the same for all instances of the

Case 1:

  <svg ...>
      <marker id="MyMarker" style="color:blue" ...>
        <path style="fill:currentColor" ...>
    <path style="marker-end:url(#MyMarker);
                 stroke:currentColor..." .../>

  Marker has blue fill.

Case 2:

  <svg ...>
      <marker id="MyMarker" ...>
        <path style="fill:currentColor" ...>
    <path style="marker-end:url(#MyMarker);
                 stroke:currentColor..." .../>

  Marker has red fill.
Received on Wednesday, 2 March 2011 19:52:36 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 21:20:13 UTC