4

我需要将以下内联 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>'swidth和heightproperties 设置为零，但这仅在我将 svg 对象的 CSS 设置为display: block;.

例如：

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

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

svg {
    height: 0;
    position: absolute;
}

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

jsFiddle 示例

4

1 回答 1

2

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

于 2012-08-13T06:45:20.500 回答