代码之家 › 专栏 › 技术社区 › RaiuProGram

Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

svg

RaiuProGram · 技术社区 · 5 月前

我有这个代码:

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

我想用第二条路来填补第一条路的空白。这个洞必须是透明的,而不是黑色的。

1 回复 | 直到 5 月前

myf 5 月前

正如罗伯特所说, fill-rule 属性仅对给定路径有影响,不影响其周围环境。为了使其工作,路径中必须有“外部”和“内部”路径段 d ata:

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

推荐文章

Aaron · 使用feTurbulence SVG标记模拟Musgrave纹理动画

1 年前

Michael Lynch · 如何使用包来构建导入SVG的React组件库?

1 年前

Chris Barr · 为什么带有<defs>的SVG在转换为<symbol>时会丢失渐变?

1 年前

HTML · 如何使用css使任何SVG图像灰度化?

2 年前

JohnB · 将<svg>资源放在</body>之后合法吗?

2 年前

Hashim Aziz · 为什么使用SVG Core设置FontAwesome在默认情况下会禁用这些选项?

2 年前

Sougata Mukherjee · 如何同时悬停svg和文本

2 年前

Basj · 即使距离为3像素,也能检测到SVG线上的点击

2 年前

jana · 在带有javascript的svg中的锚点中插入rect元素不起作用

2 年前

Developer · 如何在SVG图例中将文本悬停在rect或legendcells上

2 年前