【问题标题】：Adding SVG Defs Outside of the SVG Tag在 SVG 标签之外添加 SVG Defs
【发布时间】：2023-03-23 05:53:01
【问题描述】：

是否可以在 SVG 标签之外使用 SVG Defs。像这样的：

<defs>
    // defs code goes here
</defs>

<svg>
// svg code goes here
</svg>

如果是这样 - 我如何将 defs 标记与我想要定位的特定 svg 标记相关联？

【问题讨论】：

基本上...没有。我不清楚您要达到的目标是什么。 - developer.mozilla.org/en-US/docs/Web/SVG/Element/defs
我正在使用 react-icons - 它创建 svg 图标。我想对这些图标使用linearGradients——但输出的代码缺少defs 标签。所以我在想/希望我可以创建自己的标签并将其与输出的 svg 代码相关联。
我提供的链接显示了这是如何实现的。
您可以在不同的 svg 元素中添加 svg defs。这个 svg 元素可能很小并且带有position:absolute，所以它不会影响布局
不...一旦在初始 SVG 中定义，任何其他 SVG 都可以使用 defs。 - codepen.io/Paulie-D/pen/WqKZLb

标签： css svg

【解决方案1】：

是的

至少 THAT svg 元素之外，我认为，这就是你要追求的东西？！

只需要在任何 SVG 中标签

但不必超过<svg style="display:none;"><defs>...</defs></svg>

（不管它是在之后还是之前定义，甚至可以写在正文之外（尽管我不确定这是否是有效的 html）。）

【讨论】：