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

罗伯特写道，在SVG 1.1中不可能：

来自SVG 1.1 spec：

属性从其祖先继承到'marker'元素; 属性不会从引用“标记”的元素继承元件。

SVG2允许你说你想要引用元素的样式：

属性从其祖先继承到'marker'元素; 属性不会从引用“标记”的元素继承元件。但请注意，通过使用context的描边值在其定义中的元素上“填充”或“描边”，单个标记即可被设计为匹配引用标记的元素的样式。

参见规范this section中的示例2，了解如何使用它。请注意，这是编辑器的草稿，语法可能仍会更改。 context-fill和context-stroke的实现尚未在所有浏览器中实现。如果你正在寻找要测试的东西，它似乎是在Firefox Nightlies中使用前缀（可能在pref标志后面，我不清楚哪个标志，但可能是gfx.font_rendering.opentype_svg.enabled），请参阅{ {3}}

Answer 2

我的解决方案是定义2个标记并在css中选择正确的标记。

<html>
<body>

<input type="text" oncopy="myFunction()" value="Try to copy this text">

<script>
function myFunction() {
    alert('you tried to copy')
}
</script>

</body>
</html>

Answer 3

您可以根据输入数据为标记创建其他defs，然后在路径末尾通过 id 调用此标记。

这是一个很好的示例： https://bl.ocks.org/denisemauldin/d797804c235365526e8b85c3081c4271

我已经针对我的情况尝试了此方法，它也适用。希望这会有所帮助。

更改SVG标记的颜色 - CSS？

3 个答案: