Question

如何正确填充以下示例的Arc？ SVG似乎并不认为这条路是封闭的。

<body>
  <svg style="border:1px solid black;width:510px;height:250px">
    <path d="M 500 150 A 400 400 0 0 0 50 150 M 500 175 Z A 400 400 0 0 0 50 175 M 50 175 L 50 150 M 500 175 L 500 150 " fill="red" stroke="black" stroke-width="0.5" />
    </svg>
</body>

的jsfiddle： https://jsfiddle.net/Lys7ucxq/1/

Image of desired output

Answer 1

每次发出moveTo M命令时，都会启动一个新的子路径。因此，您的路径包含四个子路径（即两个弧和两个线）。你想要一个单一的子路径。例如......

    <svg style="border:1px solid black;width:510px;height:250px">
        <path d="M 500 150 A 400 400 0 0 0 50 150 L 50 175 A 400 400 0 0 1 500 175 Z" fill="red" stroke="black" stroke-width="0.5" />
    </svg>

SVG。如何用双ARC填充路径内部

1 个答案: