不要只渲染带有定义的 SVG 元素

Question

我希望在我的页面中有一个 <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>

这有效，但问题是浏览器呈现 <head> 中的 <svg> 标记，就好像它在正文中一样。

如果我在 <svg> 标签上设置 width=0 和 height=0，它就会消失，但它仍然是 <body>.

的子元素

是否可以在页面 <body> 之外使用仅包含定义的 <svg> 标签？

或者至少以某种方式告诉浏览器 <svg> 元素纯粹是声明性的，并不意味着成为文档可见区域的一部分。

P.S.: 我不想使用外部 .svg 文件，因为里面的定义是动态的，取决于正在查看的页面。

Answer 1

不，SVGElement (<svg>) is not part of the meta-data contents, only content-type allowed in <head>。它必须是 <body> 的后代。

但是你可以用CSS绝对放置它，将它的z-index设置为-1，将它的大小属性设置为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>

不要只渲染带有定义的 SVG 元素

Don't render SVG element with definitions only

html

svg

html-head