如何自定义 SVG Stroke Linecap答案

【问题标题】：How to customize SVG Stroke Linecap如何自定义 SVG Stroke Linecap
【发布时间】：2016-06-22 11:10:43
【问题描述】：

我想知道是否有人尝试在 SVG stroke-linecap 上创建自定义形状。而不是标准（圆形，方形），我想在倒数计时器的路径上创建一个反向半圆。让我知道这是否可以使用 SVG / 如果有人尝试过类似的事情。问候苏雷什

【问题讨论】：

通过 marker-end 和 marker-start 将标记附加到行上。

标签： svg

【解决方案1】：

按照 Robert 的建议，您可以使用 <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>

【讨论】：

标记在 IE 上非常繁琐——你可能需要试验一下
是的，我忘了提。 IE 长期存在使用markerUnits="strokeWidth" 定义的标记的错误。您可以改用固定宽度重新定义标记，但是您需要为使用的每个笔划宽度设置一个标记。