Question

我需要将以下内联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>的{{1}}和width属性设置为零，但这只有在我将svg对象的CSS设置为height时才有效。

例如：

display: block;

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

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

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

jsFiddle example

Answer 1

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

Answer 2

由于似乎没有替代方案，至少在当前技术的情况下，我不得不回答：不，不可能阻止SVG对象干扰HTML布局，除非使用上面的一个CSS hacks

正如原帖中所述，隐藏SVG元素（不禁用过滤器）的唯一方法是：

将<svg>代码的height和width设置为零，然后将其CSS设置为display: block。
将<svg>标记的CSS设置为height: 0; position: absolute;

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

2 个答案: