blocks|key|1141089|text|最简单的方法是使用带有洞的<path>，并将指针事件设置为none，这样事件就可以传递到下的<rect>。当然，还有许多其他方法来处理事件，例如用<g>包装事件并在其上处理事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1141090|你不需要把自己限制在基本的形状和使用复杂的裁剪。让事情变得足够灵活，这样你就可以复制和粘贴由inkscape等工具生成的路径数据。|1141091|entityMap^0|D|6|T|4|1A|6|21|3|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|I|$]]

Easiest way is to use <code>&lt;path&gt;</code> with the hole, and set pointer-events to <code>none</code> so events can pass through to the <code>&lt;rect&gt;</code> under. Of course there are many other ways to handle events such as wrapping them with a <code>&lt;g&gt;</code> and handling events on it.

You don't need to limit yourself to the basic shapes and use complicated clipping. Make things felxible enough so you can copy&amp;paste path data generated by tools like inkscape.

blocks|key|1141141|text|我看到你已经解决了这个问题，只是想补充一下，如果你想要更高级的东西，那么使用<mask>通常是相当容易的，例如http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1141142|然而，如果你可以避免遮罩和裁剪(例如，只在上面画东西)，这通常会带来更好的性能/用户体验。|1141143|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg^0|12|6|1J|1V|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

I see that you have it solved already, just wanted to add that if you want something more advanced then it's often quite easy to use a <code>&lt;mask&gt;</code>, see <a href="http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg" rel="noreferrer">http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg</a> for example.

However, if you can avoid masking and clipping (e.g by just drawing things on top) that usually leads to better performance/user-experience.

So basically as my title says, I want to "cut a hole" in a rect element. 

I have two rect elements, one on top of the other. The one on the bottom has a fill colour of white, and the one on the top has a fill colour of grey.

What I want to do is cut a triangle out of the top rect element so that the rect element below shows through.

This svg element is going to be used as an audio button for a media player on a page. In other words, you'll be able to click (or drag) your mouse left/right and the change in audio level will be represented by a change in the width of the rect element on the bottom, which shows through the triangle cut out of the top rect element.

I hope that's not too confusing. :P

Here is a quick mockup of what it should look like: <a href="http://forboden.com/coding/s1.png" rel="noreferrer">http://forboden.com/coding/s1.png</a>

Here is my code: <a href="http://forboden.com/coding/svgClipTest.html" rel="noreferrer">http://forboden.com/coding/svgClipTest.html</a>

Where am I going wrong here?

How to cut a hole in an SVG rectangle

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

所以基本上就像我的标题所说的，我想在一个rect元素中“开一个洞”。我有两个rect元素，一个在另一个之上。底部的填充色为白色，顶部的填充色为灰色。我想做的是从顶部的rect元素中切出一个三角形，这样下面的rect元素就可以显示出来。此svg元素将用作页面上媒体播放器的音频按钮。换句话说，您将能够向左/向右单击(或拖动...

问如何在SVG矩形中开孔
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG矩形中开孔EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在SVG矩形中开孔
EN