带弧线的 SVG 路径填充行为

Question

我创建了一个 SVG 表单，其中一个路径有几行，然后是一个弧。 线条和弧线创建了一个我想用颜色填充的表格。

但它的行为不像我想要的那样。我想知道我是否缺少 css 设置，或者我的方法是否完全错误。

<style>
body {
    background-color: #FFFFFF;
}
#path {
    fill: blue;
    stroke: green;
    stroke-width: 4;
    stroke-miterlimit: 10;
}
</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 300 300" xml:space="preserve">
    <path id="path" d="M25,148 L73,147 L150,70 L220,142 L275,140 M25,150 A5,5 0 1,1 275,142"></path>
</svg>

这是一个 jsfiddle： JSfiddle

我只想要形状内部的蓝色，但弧线只会把我的整个形状搞砸。

我缺少一个简单的解决方法吗？

我确实对它进行了一些研究并尝试使用填充规则属性进行试验，但它没有改变任何东西。

任何帮助表示赞赏！

Answer 1

正在填充三角形剖面，因为椭圆弧和锯齿形剖面被有效地绘制为单独的对象，因此剖面中的填充部分只是弧形剖面的一部分。

解决此问题的最简单方法是从椭圆弧段开始路径，然后是折线数据，但顺序相反，因此您继续沿逆时针方向围绕对象。

由于M 或L 指令之后的每一对额外坐标都被解释为额外的线段，您可以通过省略额外的Ls 来使您的标记更加简洁：

body {
    background-color: #FFFFFF;
}
#path {
    fill: blue;
    stroke: green;
    stroke-width: 4;
    stroke-miterlimit: 10;
}

<svg width="500"
     height="500"
     viewBox="0 0 300 300">
    <path id="path" d="M25 150 A5 5 0 1 1 275 142L275 140 220 142 150 70 73 147 25 148Z"/>
</svg>

Answer 2

如果您在抽签过程中移动，路径填充会有些混乱。您应该从第四条线的末端画一条弧线回到您的画线起点。相反，您将笔移回绘制起点，然后绘制弧线。出于填充的目的，移动被视为平局。