gpt4 book ai didi

html - 不干扰布局的内联 HTML5 SVG 过滤器

转载 作者:搜寻专家 更新时间:2023-10-31 08:35:39 25 4
gpt4 key购买 nike

我需要将以下内联 SVG 过滤器注入(inject)到我的 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> 的开始标记,但这也会在显示的文档的开头留下一个大的空白区域。

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

我也试过设置 <svg>widthheight属性为零,但这只有在我将 svg 对象的 CSS 设置为 display: block; 时才有效.

例如:

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

目前,我的临时解决方法是使用 css 来尝试隐藏它:

svg {
height: 0;
position: absolute;
}

如何防止 SVG 对象干扰我的 HTML 布局(不使用此 css 技巧)?

jsFiddle example

最佳答案

我不肯定这行得通,但 SVG 元素允许宽度和高度属性(如 img 标签)。所以试试:svg width="0"height="0"

关于html - 不干扰布局的内联 HTML5 SVG 过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11926668/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com