内嵌HTML5 SVG过滤器，不会干扰布局 [英] Inline HTML5 SVG filters without interfering with the layout
问题描述
< svg> 我需要将以下内联SVG过滤器注入到我的HTML5文档中。
< defs>
< filter id =grayscale>
< feColorMatrix type =matrixvalues =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> 标签的开头，但是这也会在显示的文档的开始处留下大的空白。 / p>
在SVG对象上设置 display：none; 会阻止过滤器工作。
我也尝试设置< svg> 的宽度和 height 属性为零，但是这只有在我将svg对象的CSS设置为 display：block; 。
$ b
例如：
<！DOCTYPE html>
< html>
< head>
...
< svg> ...< / svg>
< / head>
...
< / html>
目前，我的临时解决方法是使用css试图隐藏它：
svg {
height：0;
位置：绝对;
$ b $ p
$ b 如何防止SVG对象干扰我的HTML布局（不使用这个CSS技巧）？
解决方案由于似乎没有其他选择，至少在现有技术中，我必须回答：不，它是不可能防止SVG对象干扰HTML布局，除非使用上面的CSS黑客之一。
正如原始文章中所述，唯一的方法是隐藏SVG元素（不禁用过滤器）将会：
-
设置< svg> 标签的高度和宽度设置为零，然后将其CSS设置为 display：block 。
-
设置< svg> CSS to height：0; position：absolute;
I need to inject the following inline SVG filter into my HTML5 document:
<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>
I tried placing it outside of the <html> tags but this did not work. It leaves a large blank space at the start or end of the displayed page depending on where I put it.
I tried placing it in the <head> or start of the <body> tag but this leaves a large blank space at the start of the displayed document as well.
Setting display: none; on the SVG object will prevent the filter from working.
I have also tried setting <svg>'s width and height properties to zero but this only works if I set the CSS for svg objects to display: block;.
For example:
<!DOCTYPE html>
<html>
<head>
...
<svg> ... </svg>
</head>
...
</html>
Currently, my temporary fix is to use css to try to hide it:
svg {
height: 0;
position: absolute;
}
How do I prevent the SVG object from interfering with my HTML layout (without using this css trick)?
解决方案 Since there appears to be no alternatives, at least with the current technology, I would have to answer: no, it is not possible to prevent SVG objects from interfering with the HTML layout, unless one of the CSS hacks above are used.
As stated in the original post, the only way to hide the SVG element (without disabling the filter) would be to:
Set the <svg> tag's height and width to zero, then set its CSS to display: block.
Set the <svg> tag's CSS to height: 0; position: absolute;
这篇关于内嵌HTML5 SVG过滤器，不会干扰布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
