☰

为什么我不能用这个 SVG 路径创建洞？

tag-icon • tag-icon svg
为什么我不能用这个 SVG 路径创建洞？

这是 SVG 路径。我期望形状中有一个洞，但它似乎不起作用。我不明白为什么：

M70,20 L80,35 75,45 90,55 95,50 105,60 85,80 90,90 80,100 50,70 45,70 30,55 50,30 55,35 z M65,50 L80,70 75,75 55,60 z

答案1

看不到形状中间的洞（对于第二个子路径）的原因是，你看到的是 SVG 路径充满，因此外部元素填充覆盖了其中的所有内容。

如果您设置充满到没有任何那么它会很好地显示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="29 19 77 82">
    <path d="M70 20 80 35 75 45 90 55 95 50 105 60 85 80 90 90 80 100 50 70 45 70 30 55 50 30 55 35zM65 50 80 70 75 75 55 60z" stroke="#000000" stroke-width="1" fill="none"/>
</svg>

您也可以https://yqnn.github.io/svg-path-editor/通过取消选中填充复选框。

但是，要修改路径，使您将中间形状视为外部形状的排除，就要按照与外部子路径相反的方向绘制第二条路径（外部路径是顺时针绘制的，所以您逆时针绘制这条路径）。

您可以通过更改M65 50 L80 70 75 75 55 60Z为M65 50 55 60 75 75 80 70Z：

M70 20 80 35 75 45 90 55 95 50 105 60 85 80 90 90 80 100 50 70 45 70 30 55 50 30 55 35Z M65 50 55 60 75 75 80 70Z

相关内容