我已经看到了一些使用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>
如果有人可以告诉我如何做到这一点,我将不胜感激.
Eri*_*röm 24
正如罗伯特所写,在SVG 1.1中不可能:
属性从其祖先继承到'marker'元素; 属性不会从引用'marker'元素的元素继承.
SVG2允许您说您想要引用元素的样式:
属性从其祖先继承到'marker'元素; 属性不会从引用'marker'元素的元素继承.但请注意,通过在其定义中的元素上使用"填充"或"笔划"的上下文笔划值,可以设计单个标记以匹配引用标记的元素的样式.
请参阅规范本节中的示例2,了解如何使用它.请注意,这是编辑器的草稿,语法可能仍会更改.所有浏览器的实现context-fill和context-stroke尚未实现.如果您正在寻找要测试的内容,它似乎是gfx.font_rendering.opentype_svg.enabled在Firefox Nightlies中使用前缀(可能在pref标志后面,我不清楚哪个标志,但可能),请参阅WG讨论.
我的解决方案是定义 2 个标记并在 css 中选择正确的一个。
<html>
<head>
<style>
#arrow {
stroke: #000000;
fill: #000000;
}
#hover-arrow {
stroke: #98dfd9;
fill: #98dfd9;
}
.edge{
position: absolute;
stroke: #000;
marker: #000;
fill: #000;
}
.edge-out-dir{
stroke-width: 1;
marker-end: url("#arrow")
}
.edge:hover{
stroke: #98dfd9;
}
.edge:hover .edge-out-dir{
marker-end: url("#hover-arrow")
}
</style>
</head>
<body>
<svg>
<defs>
<marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" /></marker>
<marker id="hover-arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth"><path d="M0,0 L0,6 L9,3 z" /></marker>
</defs>
</svg>
<svg width="276px" height="100px" class="edge" style="left: 466px; top: 228px;">
<line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
</line>
</svg>
<svg width="276px" height="100px" class="edge" style="left: 466px; top: 428px;">
<line x1="64" y1="28" x2="200" y2="70" class="edge-out-dir">
</line>
</svg>
</body>
</html>
https://jsfiddle.net/mo3eLsgf/