html - 提供一个没有实际 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？

标签： htmlcsssvg

Answer 1

避免display: none作为一般规则。它会影响某些元素的渲染，因此我们通常不建议这样做。

你可以只使用width="0" height="0".

如果您愿意，您也可以添加style="position: absolute;"or"opacity: 0"如果您愿意，但它们不是必需的。