Question

我试图在SVG线的起点/终点处有实线，但是标记使用它们保持形状的值。有没有办法阻止它？

这是我目前的SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:oryx="http://www.b3mn.org/oryx" version="1.0" >
    <defs>
        <marker id="start" oryx:optional="yes" oryx:enabled="yes" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto">
            <circle cx="5" cy="5" r="5" fill="none" stroke="black" />
        </marker>
        <marker id="end" refX="10" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto">
            <path id="arrow" d="M 0 0 L 10 5 L 0 10 L 0 0" fill="none" stroke="black" />
        </marker>
    </defs>
    <g>
        <path d="M10 50 L70 50" stroke="black" fill="none" stroke-width="0.75pt" stroke-dasharray="10,4" marker-start="url(#start)" marker-end="url(#end)" />       
    </g>
</svg>

我希望圆圈和箭头是实心的。我尝试在圆圈和路径上添加stroke-dasharray =“none”，但没有成功。

Answer 1

嗯，这看起来像一个webkit bug。 stroke-dasharray="none"根据规范应该是正确的属性，但stroke-dasharray="0"适用于所有浏览器，它应该达到相同的结果（根据规范）。

Answer 2

Safari 6似乎忽略了stroke-dasharray="0"属性。我能找到的唯一解决方法是将stroke-dasharray设置为大于markerWidth / markerHeight的值。

Answer 3

stroke-dasharray="0"和..="none"都不适用于我 esad's answer激励我但我认为更好的做法是stroke-dasharray="100%"

如何防止SVG标记继承其形状的stroke-dasharray？

3 个答案: