svg: 谁能帮我画个弧线？

Question

我正在尝试使用 SVG 绘制弧线，但我被卡住了。目标是得到这样的数字：

我得到的是：

这些是我正在使用的 SVG 标签：

<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
  <path d="M 100 50
    a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>

任何人都可以帮助我了解我的节点上有什么问题吗？

Answer 1

<svg width='500' height='500' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' >
<g style='transform-origin:center;'>
  <!--
  <path d="M 100 50
    a 50,50 0 0 0 100,0" stroke="black" fill="red" stroke-width="2" />
  -->
  <path d="M 50 50
    a 50,50 270 1 0 25,15" stroke="black" fill="red" stroke-width="2" />
  <path d="M 150 150
    a 50,50 270 0 0 125,115" stroke="black" fill="red" stroke-width="2" />
</g>
</svg>

你的问题是large-arc-flag，设置为1

MDN Reference

svg: 谁能帮我画个弧线？

svg: can anyone help me to draw an arc?

svg

draw