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

【问题标题】：Provide an SVG filter without an actual svg element提供一个没有实际 svg 元素的 SVG 过滤器
【发布时间】：2018-10-25 06:31:11
【问题描述】：

我有一个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 提供过滤器？

【问题讨论】：

Remove or hide svg element的可能重复
或者stackoverflow.com/q/44485500/1427878
第二个只有一个（可怕的）答案，但第一个建议使用display: none;。如果这是首选方式，请继续并将其添加为答案。
这个答案并不像你想象的那么可怕；在某些情况下，通过简单的display: none 隐藏内容可能会产生不利影响。例如，如果某些东西需要从视图中隐藏，但屏幕阅读器仍然可以使用 - 那么使用绝对定位（加上更多属性，宽度和高度设置为 1px，溢出切断，...）是更可取的方法。如果实际上使用 display:none 隐藏了 SVG，是否所有浏览器都允许您应用过滤器，这是您必须测试的。
这很可怕，因为它包含“最后，我……”而没有“因为”。

标签： html css svg

【解决方案1】：

通常避免使用display: none。它会影响某些元素的渲染，因此我们通常不建议这样做。

你可以使用width="0" height="0"。

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

【讨论】：