Question

是否可以使用属性和CSS将SVG的预定义形状line更改为形状（而不是circle元素）的圆形圆？我的意思是我们不会将line代码更改为circle代码，只需更改一些样式和属性，使其看起来像圆圈。

我尝试stroke-linecap属性，但似乎我错过了一些东西。

<!DOCTYPE html>
<html>
<body>

<svg height="210" width="500">
  <line x1="0" y1="0" x2="30" y2="0" stroke-linecap="round" style="stroke:rgb(255,0,0);stroke-width:40" />
  Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

你能告诉我怎么做吗？

提前致谢。

Answer 1

https://codepen.io/a10k/pen/ModQzq <svg height="210" width="500"> <line x1="100" y1="100" x2="100" y2="100" stroke-linecap="round" style="stroke:rgb(255,0,0);stroke-width:40" /> Sorry, your browser does not support inline SVG. </svg>

你达到了你想要的效果，你只需将线放在一个角落里，这样它就不会像修剪一样看起来像一个圆圈。

SVG：是否可以使用属性和CSS将预定义的线条形状更改为圆形

1 个答案: