Question

我是SVG的新手，我的SVG折线有些麻烦。我想尝试使用stroke-linecap="round"和stroke-linejoin="round"围绕下方箭头的顶部，但它似乎不起作用。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23.7 44.5" enable-background="new 0 0 23.7 44.5" xml:space="preserve">
  <polygon points="22.3,44.5 23.7,43.1 2.8,22.3 23.7,1.4 22.3,0 0,22.3 " stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
</svg>

我做错了吗？

Answer 1

您尚未指定笔划，因此不会绘制笔划（尝试stroke =“red”）。多边形实际上是可见的，因为它以这种方式填充。你真正想要的是两条线。像这样......

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200">
  <polyline points="23,43.8 3.5,22.3 22.3,3 " stroke-width="1" stroke-linecap="round" stroke-linejoin="round" stroke="black" fill="none"/>
</svg>

中风线条圆形与折线

1 个答案: