主页 / coding / 问题 / 78820800
Accepted
RaiuProGram
Asked: 2024-08-01 19:48:54 +0800 CST

Svg evenodd="true" 不起作用（使用路径在 svg 上打洞）

  • 772

我有这个代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270 80">
    <path d="M 230 10 L 220 20 L 220 60 L 230 70 L 250 70 L 260 60 L 260 20 L 250 10 L 230 10" fill="#FF5500"/>
    <path d="M 235 20 L 230 25 L 230 55 L 235 60 L 245 60 L 250 55 L 250 25 L 245 20 L 235 20" fill-rule="evenodd"/>
</svg>

我希望第二条路径填充第一条路径上的一个洞。这个洞需要是透明的，而不是黑色的。

svg

1 个回答

  1. Best Answer

    正如罗伯特所说，fill-rule属性仅对给定路径有效，不会影响其周围环境。要使其工作，路径d数据中必须有“外部”和“内部”路径段：

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="200 0 270 80">
    <path d="M 230 10 L 220 20 L 220 60 L 230 70 L 250 70 L 260 60 L 260 20 L 250 10 L 230 10
             M 235 20 L 230 25 L 230 55 L 235 60 L 245 60 L 250 55 L 250 25 L 245 20 L 235 20"
    fill="#FF5500"
    fill-rule="evenodd" />
</svg>

    • 2

相关问题