2

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

但是，重用其他定义，比如<radialGradient />对我不起作用。当渐变<defs />在同一个元素中的一个元素中定义<svg />时，它会按预期工作，但当渐变在另一个<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渐变移动到defs可见 svg 元素内的元素中时，参考效果很好。

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

解决方案

Robert Longson指出我的可重用 svg 的“存储库”有一个style. display:none对我来说，这感觉是正确的方法。毕竟，这个存储库不应该以任何方式显示。问题是浏览器优化了这一点，甚至可能根本不解析任何样式，这使得可以引用元素，但不能引用样式 （比如我的渐变）

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

4

1 回答 1

4

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

于 2016-03-04T15:33:34.367 回答