如何自定义SVG笔画Linecap

我想知道是否有人试图在SVG stroke-linecap上创建自定义形状。而不是标准（圆形，方形），我想在倒数计时器的路径上创建一个逆半圆。让我知道这是否可能与SVG /如果任何人尝试类似的东西。问候苏雷什如何自定义SVG笔画Linecap

来源

2016-06-21 sur

附加一个标记，以通过标记末端和标记开始的行。 –

正如罗伯特建议，你可以使用一个<marker>，与marker-end，为自定义端盖添加到订单。

<svg> 
 
    
 
    <defs> 
 
    <marker id="InverseSemicircleEnd" 
 
     viewBox="0 0 5 10" refX="0" refY="5" 
 
     markerUnits="strokeWidth" 
 
     markerWidth="0.5" markerHeight="1" 
 
     orient="auto"> 
 
     <path d="M 0 0 L 5 0 A 5 5 0 0 0 5 10 L 0 10 z" /> 
 
    </marker> 
 
    </defs> 
 
    
 
    <line y1="75" x2="270" y2="75" 
 
     fill="none" stroke="black" stroke-width="40" 
 
     marker-end="url(#InverseSemicircleEnd)" /> 
 
</svg>

来源

2016-06-21 16:09:49

标记在IE上非常复杂 - 您可能需要试验 –

是的，我忘了提及。 IE使用'markerUnits =“strokeWidth”'定义的标记存在长期存在的错误。您可以使用固定宽度重新定义标记，但是您需要为每个笔划宽度使用一个标记。 –

如何自定义SVG笔画Linecap

回答

相关问题