Changing an SVG marker's color - CSS? -
i've seen number of examples of using css affect style of svg elements, none far question markers. , honestly, i'm still working through syntax of both(svg & css).
i want define marker, , able use in various places 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 give me tip on how might done, appreciate it.
as robert wrote, it's not possible in svg 1.1:
from svg 1.1 spec:
properties inherit ‘marker’ element ancestors; properties not inherit element referencing ‘marker’ element.
svg2 allow want style referencing element:
properties inherit ‘marker’ element ancestors; properties not inherit element referencing ‘marker’ element. note using context-stroke value ‘fill’ or ‘stroke’ on elements in definition, single marker can designed match style of element referencing marker.
see example 2 in this section of spec how can used. note editor's draft, , syntax may still change. implementations of context-fill
, context-stroke
not yet in browsers. if you're looking test in, seems implemented prefix (possibly behind pref flag, i'm not clear on flag, possibly gfx.font_rendering.opentype_svg.enabled
) in firefox nightlies, see wg discussion here.
Comments
Post a Comment