具有不同线帽的SVG笔划

Question

是否可以使SVG线具有1个圆形末端（linecap）和1个但是或方形末端。我不认为这个问题需要更具描述性，但Stackoverflow问题验证器需要这一行文字。

Answer 1

这可以使用2个具有不同宽度值的堆叠svg线元素来完成，如下所示：

<svg height="210" width="500">
  <line x1="50" y1="100" x2="200" y2="100" stroke="red" stroke-width="30"  stroke-linecap="round" />
    <line x1="30" y1="100" x2="190" y2="100" stroke="red"  stroke-width="30"/>
</svg>

据我所知，只使用1个带有多个linecap值的svg线元素是不可能的。