主页 / computer / 问题 / 1822342
Accepted
lukehawk
Asked: 2023-12-20 00:07:16 +0800 CST

为什么我无法使用此 SVG 路径创建孔？

  • 772

这是 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
svg

1 个回答

  1. Best Answer

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

    如果将填充设置为无，那么它会很好地显示：

    <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
    • 1

相关问题