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

我正在使用SVG构建一个图标解决方案，其中的部分图标需要可重用。我的HTML文档中内嵌了几个不同的<svg />元素，并且<use />元素可以很好地用于重用形状，路径等，甚至在svg元素之间也是如此。如何从不同的内联SVG元素引用radialGradient？

但是，重复使用其他定义，如<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>

为什么可以从其他svg元素use形状，而不是属性值也是这样吗？当我将shadow渐变移动到可见svg元素内的defs元素中时，该引用完美地起作用。

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

解决方案

Robert Longson指出，可重复使用我的SVG“库”具有display:none一个style。对我而言，这感觉就像做这件事的正确方法。毕竟，这个存储库不应以任何方式显示。问题是，在浏览器中甚至可能不解析任何风格可言，这使得它能够引用元素优化了这一点，但不是风格（就像我的梯度）

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

来源

2016-03-04 Anders Tornblad