提供一个没有实际 svg 元素的 SVG 过滤器

Question

我有一个

svg

只是为了提供

img

的过滤器：

<svg>
    <filter id="makewhite">
        <feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0" />
    </filter>
</svg>

<img src="icon.svg" style="filter:url(#makewhite)">

这个无内容的 SVG 仍然有一个大小，并将我的内容推到一边：

有没有更好的方法为 SVG 提供过滤器

img

？

Answer 1

一般规则是避免

display: none

。它会影响某些元素的渲染，因此我们通常不建议这样做。

您只需使用

width="0" height="0"

即可。

如果您愿意，您还可以添加

style="position: absolute;"

或

"opacity: 0"

，但它们不是必需的。

Answer 2

是的，绝对有。您可以将 SVG 文件内联为 data: URL，然后使用

url()

函数加载它。

filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="makewhite"><feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0"/></filter></svg>#makewhite');