Question

我正在使用SVG构建图标解决方案，其中部分图标需要可重复使用。我的HTML文档中有几个不同的<svg />元素内联，<use />元素非常适合重复使用形状 - rects，path等，甚至在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渐变移动到可见svg元素内的defs元素时，该引用可以正常工作。

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

解决方案

Robert Longson指出我的＆＃34;存储库＆＃34;可重复使用的svg的style display:none。对我来说，感觉就像这样做的正确方法。毕竟，不应以任何方式显示此存储库。问题是浏览器通过甚至根本不解析任何样式来优化它，这使得可以引用元素，但不能样式 （就像我的渐变）

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

Answer 1

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

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

1 个答案: