如何剪切svg的白色部分？

Question

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

\n\n

示例 \xe2\x80\x94 我想从 svg 中删除白色区域并仅留下蓝色图像。

\n\n

\n

Answer 1

这里的大多数人都在寻找与您的问题完全相反的问题，因为 svg 不允许background-xxx使用 html 设置他们熟悉的那些属性。没有对背景的内置支持，正如您从以下代码片段中看到的那样，其中的文本闪闪发光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"/>或类似的背景来提供背景。要摆脱背景，您可以：

1. 设置fill="none"在您的rect.

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

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