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

我有一个

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

提供过滤器？

通常避免

display:none

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

您只需使用

width=“0”height=“0”

---

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

style=“position:absolute；”“

或

不透明度：0”

，但它们应该不是必需的。

可能重复，或者第二个答案只有一个（可怕的）答案，但第一个建议使用

display:none。如果这是首选的方式，那么继续添加它作为答案；在某些情况下，通过简单的
显示隐藏内容：none
会产生不良影响。例如，如果需要从视图中隐藏内容，但屏幕阅读器仍然可以使用，那么使用绝对定位（再加上一些属性，宽度和高度设置为1px，溢出切断…）是更好的方法。如果SVG实际上是使用display隐藏的，那么是否所有浏览器都允许您应用过滤器：无是您必须测试的内容。这很可怕，因为它包含“最后，我…”和“因为”。