小编Mil*_*uin的帖子

更改SVG标记的颜色 - CSS?

我已经看到了一些使用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

26
推荐指数
2
解决办法
1万
查看次数

标签 统计

svg ×1