如何从不同的内联 SVG 元素引用 radialGradient？

Question

我正在使用 SVG 构建图标解决方案，其中部分图标需要可重复使用。在我的 HTML 文档中有几个不同的 <svg /> 内联元素，<use /> 元素非常适合重用形状——矩形、路径等，甚至在 svg 元素之间也是如此。

然而，重复使用其他定义，如 <radialGradient /> 对我不起作用。当在同一 <svg /> 元素中的 <defs /> 元素中定义渐变时，它会按预期工作，但在另一个 <svg /> 元素中定义渐变时则不然。

伪代码

<!-- Near the top of my BODY element -->
<!-- This is where I keep the SVG stuff I want to reuse -->
<svg id="for-reuse" style="display:none">
  <defs>
    <path id="marker" d="M63 127L49 93C44 80 52 69 63 69L64 69C75 69 83 80 78 93L64 127" />
    <radialGradient id="shadow">
      <stop offset="10%" stop-color="rgba(0,0,0,0.4)" />
      <stop offset="90%" stop-color="rgba(0,0,0,0)" />
    </radialGradient>
  </defs>
</svg>

<!-- Further down the html document -->
<svg viewBox="0 0 128 128" style="width:64px; height:64px" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- This use element works fine! -->
  <use xlink:href="#marker" style="fill:black" />

  <!-- But this fill attribute does not! -->
  <rect x="5" y="5" width="20" height="20" fill="url(#shadow)" />
</svg>

为什么可以 use 来自其他 svg 元素的形状，而不是像这样的属性值？当我将 shadow 渐变移动到可见 svg 元素内的 defs 元素时，参考效果很好。

这是一个 JSFiddle，说明了工作和非工作：https://jsfiddle.net/7tfna0L8/2/

解决方法

Robert Longson 指出我的 "repository" 可重用 svg 的 style 为 display:none。对我来说，这感觉是正确的方法。毕竟，这个存储库不应该以任何方式显示。问题是浏览器通过可能根本不解析任何样式来优化它，这使得可以引用 elements，但不能引用 style （像我的渐变）

工作 jsFiddle：https://jsfiddle.net/atornblad/7tfna0L8/3/

Answer 1

您的远渐变位于样式为 display:none 的 svg 中。这会禁用该片段中的所有 CSS，因此它不起作用。尝试 width="0" height="0" 而不是 display:none.

如何从不同的内联 SVG 元素引用 radialGradient？

How can I reference a radialGradient from a different inline SVG element?

html

svg

xlink

inline-svg