我已经看到了一些使用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>
Run Code Online (Sandbox Code Playgroud)
如果有人可以告诉我如何做到这一点,我将不胜感激.
svg ×1