svg - 更改SVG标记的颜色-CSS？

Question

我已经看到了许多使用CSS来影响SVG元素样式的示例，但是到目前为止，这些示例都没有帮助我解决有关标记的问题。老实说，我仍在研究两者的语法(SVG和CSS)。

我想定义一个标记，然后可以在不同的地方使用不同的颜色使用它。

例如:

<?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>

如果有人可以给我提示如何完成此操作，我将不胜感激。

Answer 1

正如Robert所写，在SVG 1.1中是不可能的:

从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确实允许您说您想要引用元素中的样式:

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.

有关如何使用的信息，请参见规范 this section中的示例2。请注意，这是编辑的草稿，语法可能仍会更改。并非所有浏览器都实现 context-fill和 context-stroke。如果您正在寻找要测试的东西，它似乎已在Firefox Nightlies中用前缀(可能在pref标志之后，我不清楚是哪个标志，但可能是 gfx.font_rendering.opentype_svg.enabled)实现，请参阅 WG discussion here。