如何在 SVG 矩形中切一个洞 [英] How to cut a hole in an SVG rectangle

问题描述

所以基本上正如我的标题所说，我想在 rect 元素中切一个洞".

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

我有两个 rect 元素，一个在另一个之上.底部的填充颜色为白色，顶部的填充颜色为灰色.

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.

我想要做的是从顶部的 rect 元素中切出一个三角形，以便下面的 rect 元素显示出来.

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

此 svg 元素将用作页面上媒体播放器的音频按钮.换句话说，您将能够向左/向右单击(或拖动)鼠标，音频电平的变化将通过底部 rect 元素宽度的变化来表示，通过三角形切出显示顶部 rect 元素.

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.

我希望这不会太令人困惑.:P

I hope that's not too confusing. :P

这是它应该是什么样子的快速模型:http://forboden.com/coding/s1.png

Here is a quick mockup of what it should look like: http://forboden.com/coding/s1.png

这是我的代码:http://forboden.com/coding/svgClipTest.html

我哪里出错了?

推荐答案

最简单的方法是将 与孔一起使用，并将 pointer-events 设置为 none> 所以事件可以传递到 下.当然，还有许多其他方法可以处理事件，例如用 <g> 包装它们并在其上处理事件.

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

您不需要局限于基本形状并使用复杂的剪裁.使事情足够灵活，以便您可以复制和粘贴由inkscape 等工具生成的路径数据.

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

这篇关于如何在 SVG 矩形中切一个洞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！