完全使用CSS定义"标记端"

Question

MDN表示可以使用CSS为SVG<path>定义marker-end值，但所有示例都使用引用图形中现有元素的url(#...)语法。

是否可以在CSS中完全定义一个标记，这样通过更改样式表可以将标记样式更改为完全不同的形状？和中一样，图像中还没有定义的？

或者我必须在图像本身中包含所有这些选项，而CSS只能选择使用哪一个？

(我尝试了一些data:URL解决方案，但对我不起作用。(

Answer 1

这并非完全不可能，但也存在一些障碍。您可以使用CSS设置标记形状的样式，但不能通过更改使用标记的路径的样式。您需要更改标记定义本身的样式。因此，您需要为每个要装饰的路径使用一个唯一的标记，否则引用同一<marker>的所有元素都会同时更改。

此外，您只能更改<marker>元素的内容的表示属性。它自己的属性(markerWidth、markerHeight、refX、refY、orient(都是XML，而不是表示属性。但是您可以更改标记形状。一种策略可能是定义多个形状，并将所有形状都设置为display: none以保存当前要显示的形状。

或者，由于Chrome和Firefox已经在CSS中实现了d属性，您也可以重新定义这样的形状：

svg {
width: 200px;
display: block;
}
input ~ svg #marker {
--shape: path('M2,2 H8 V8 H2 z');
--color: green;
}
input:checked ~ svg #marker {
--shape: path('M5,0 10,5 5,10 0,5 z');
--color: red;
}
#marker path {    
d: var(--shape);
fill: var(--color);
}
#usage {
stroke: black;
marker-end: url(#marker);
}

<input id="switch" type="checkbox"> <label for="switch">Switch marker</label>
<svg viewBox="0 0 30 30">
<marker id="marker" viewBox="0 0 10 10" orient="auto"
markerWidth="6" markerHeight="6" refX="5" refY="5">
<path />
</marker>
<path id="usage" d="M5,18 25,12" />
</svg>

在这种模式下，您可能会将其与通过在<use>元素上设置CSS自定义属性来继承shadow DOM中的CSS自定义属性的方式进行比较。唉，这对参考标记不起作用：

svg {
width: 200px;
display: block;
}
input ~ svg #usage {
--shape: path('M2,2 H8 V8 H2 z');
--color: green;
}
input:checked ~ svg #usage {
--shape: path('M5,0 10,5 5,10 0,5 z');
--color: red;
}
#marker path {    
d: var(--shape);
fill: var(--color);
}
#usage {
stroke: black;
marker-end: url(#marker);
}

<input id="switch" type="checkbox"> <label for="switch">Switch marker</label>
<svg viewBox="0 0 30 30">
<marker id="marker" viewBox="0 0 10 10" orient="auto"
markerWidth="6" markerHeight="6" refX="5" refY="5">
<path />
</marker>
<path id="usage" d="M5,18 25,12" />
</svg>

Answer 2

这里有一个编码为数据URL的标记。

它在Firefox上运行，但Chrome似乎仍然不支持外部标记。

<svg viewBox="0 50 120 120" xmlns="http://www.w3.org/2000/svg">
<polyline fill="none" stroke="black"
points="40,60 70,80" marker-end='url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%20120%20120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cmarker%20id%3D%22triangle%22%20viewBox%3D%220%200%2010%2010%22%20refX%3D%221%22%20refY%3D%225%22%20markerUnits%3D%22strokeWidth%22%20markerWidth%3D%2210%22%20markerHeight%3D%2210%22%20orient%3D%22auto%22%3E%3Cpath%20d%3D%22M%200%200%20L%2010%205%20L%200%2010%20z%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fmarker%3E%3C%2Fdefs%3E%3C%2Fsvg%3E#triangle)'/>
</svg>