我想要一个<svg>我页面中的 标签，其中包含我将在其他 SVG 元素上使用的所有 SVG 定义。
像这样的东西:
<html>
<head>
<svg>
<defs>
<filter id="shadow1">
<feDropShadow dx="3" dy="7" stdDeviation="2"/>
</filter>
</defs>
</svg>
</head>
<body style="display: flex">
<svg viewBox="0 0 100 100" width="100">
<path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" />
</svg>
</body>
</html>这可行，但问题是浏览器呈现 <svg> <head> 中的标签就好像它在体内一样。
如果我设置width=0和height=0关于<svg>标签，它消失了，但它仍然是 <body> 的子元素.
是否可以有<svg>仅包含定义但位于页面 <body> 之外的标记？
或者至少以某种方式告诉浏览器 <svg>元素纯粹是声明性的，并不意味着成为文档可见区域的一部分。
P.S.:我不想使用外部 .svg 文件，因为里面的定义是动态的并且取决于正在查看的页面。
最佳答案
不，SVGElement ( <svg> )不属于 meta-data contents ，仅允许 <head> 中的内容类型。它必须是 <body> 的后代。
但是你可以用CSS绝对放置它，将它的z-index设置为-1，将它的size属性设置为0，它就不会被渲染。
svg.defs {
position: absolute;
z-index: -1;
}<svg width="0" height="0" class="defs">
<defs>
<filter id="shadow1">
<feDropShadow dx="3" dy="7" stdDeviation="2"/>
</filter>
</defs>
</svg>
<svg viewBox="0 0 100 100" width="100">
<path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" />
</svg>关于html - 不要只渲染带有定义的 SVG 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46615809/