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

如果你在抽签中间移动，路径填充会有点混乱。您应该从第四行的末尾绘制一个弧形回到绘制开始。相反，您将笔移回绘制开始，然后绘制圆弧。为了填充，移动被视为抽奖。

Answer 2

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

解决此问题的最简单方法是使用椭圆弧段开始路径，然后按折线数据进行操作，但顺序相反，以便沿逆时针方向继续围绕对象。

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

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>

弧

2 个答案: