如何切割svg的白色部分？

Question

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

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

Answer 1

尝试使用

fill-opacity

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

Answer 2

这里的大多数人都在寻找与您的问题完全相反的问题，因为svg不允许使用html设置他们熟悉的background-xxx属性。没有内置的背景支持，您可以从以下代码段中看到div内的文字通过：

＆＃13;

＆＃13;

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

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

rect {
    fill: steelblue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

1. 在fill="none"上设置rect。

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

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