我想定义一个标记,然后能够在不同的地方使用,但颜色不同。
例如:
<?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>
如果有人可以告诉我如何做到这一点,我会很感激。
解决方法
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,了解如何使用该规范。请注意,这是编辑草稿,语法可能仍然会改变。上下文填充和上下文笔画的实现尚未在所有浏览器中使用。如果你正在寻找要测试的东西,似乎是用一个前缀来实现的(可能在一个pref标志之后,我不清楚哪个标志,但可能是gfx.font_rendering.opentype_svg.enabled)在Firefox Nightlies,见WG discussion here。