如何剪切svg的白色部分？答案

【问题标题】：How to cut the white part of svg?如何剪切svg的白色部分？
【发布时间】：2015-06-15 17:48:42
【问题描述】：

我有一个脚本，可以在 SVG 文件的中心生成一个 SVG 图像文件和其他内容。在这些图像周围-白色背景。如何修剪背景？ SVG 中的图像大小可以不同。

示例 — 我想从 svg 中删除白色区域并仅保留蓝色图像。

【问题讨论】：

我有同样的问题，这不是关于查看下面的文本，而是定义 svg 对象的大小。我想要的图标位于一个大（空）svg 画布中间的某个地方，我只想拥有这个图标。

【解决方案1】：

尝试使用

fill-opacity

属性使背景透明。另外，看看https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

【讨论】：

【解决方案2】：

这里的大多数人都在寻找与您的问题完全相反的问题，因为 svg 不允许使用 html 设置他们熟悉的 background-xxx 属性。从下面的 sn-p 中可以看出，没有对背景的内置支持，div 中的文本会透出来：

div {
    position: absolute;
    top: 50px;
    left: 0px;
}

svg {
    position: absolute;
    top: 20px;
    left: 20px;
    outline: 1px black solid;
}

rect {
    fill: steelblue;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<svg width="300" height="300">
    <rect x="50" y="50" width="200" height="200" />
</svg>

如果您的 svg 中有白色背景，您很可能会找到完整尺寸的 <rect width="100%" height="100%" fill="white"/> 或类似的提供背景。要摆脱背景，您可以：

在您的rect 上设置fill="none"。

<rect width="100%" height="100%" fill="none"/>

完全删除<rect>。但是，如果您正在编写脚本，这也会删除任何附加到它的事件侦听器。

【讨论】：