提供没有实际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"，但不一定非必要。