不要仅使用定义渲染 SVG 元素答案

【问题标题】：Don't render SVG element with definitions only不要仅使用定义渲染 SVG 元素
【发布时间】：2017-10-07 11:27:55
【问题描述】：

我想在我的页面中添加一个 <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> 中的<svg> 标记呈现为好像它在正文中一样。

如果我在<svg> 标签上设置width=0 和height=0，它会消失，但它仍然是<body> 的子元素。

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

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

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

【问题讨论】：

标签： html svg html-head

【解决方案1】：

不，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>

【讨论】：