内联 HTML5 SVG 过滤器，不干扰布局答案

【问题标题】：Inline HTML5 SVG filters without interfering with the layout内联 HTML5 SVG 过滤器，不干扰布局
【发布时间】：2012-10-12 03:48:10
【问题描述】：

我需要将以下内联 SVG 过滤器注入到我的 HTML5 文档中：

<svg>
    <defs>
        <filter id="grayscale">
            <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0">
        </filter>
    </defs>
</svg>

我尝试将它放在<html> 标签之外，但这不起作用。它会在显示页面的开头或结尾留下很大的空白区域，具体取决于我放置它的位置。

我尝试将它放在<head> 或<body> 标记的开头，但这也会在显示文档的开头留下很大的空白。

在 SVG 对象上设置 display: none; 将阻止过滤器工作。

我还尝试将<svg> 的width 和height 属性设置为零，但这仅在我将svg 对象的CSS 设置为display: block; 时才有效。

例如：

<!DOCTYPE html>
<html>
    <head>
        ...
        <svg> ... </svg>
    </head>
    ...
</html>

目前，我的临时解决方法是使用 css 尝试隐藏它：

svg {
    height: 0;
    position: absolute;
}

如何防止 SVG 对象干扰我的 HTML 布局（不使用这个 css 技巧）？

jsFiddle example

【问题讨论】：

标签： html svg

【解决方案1】：

我不肯定这有效，但 SVG 元素允许宽度和高度属性（如 img 标签）。所以试试：svg width="0" height="0"

【讨论】：

注意：当 SVG 元素的 CSS display 设置为 block 时，这对我有用。