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

Popular posts from this blog

blackberry 10 - how to add multiple markers on the google map just by url? -

php - guestbook returning database data to flash -

delphi - Dynamic file type icon -