svg - SVG 符号中的线性渐变

Question

我有一个带有 <symbol> 的 svg Sprite trhat 包含一个 <linearGradient> .我正在提交 <g>在同一 <symbol>使用此渐变 fill="url(#id)" .但是，当我加载 <symbol> 时与 <use>在其他文档中，<linearGradient>不加载。我可以看到填充的 url 指的是绝对路径而不是文档内部，并且没有正确加载。

如何加载 <linearGradient>在 <symbol> ?

<symbol viewBox="0 0 550 90" width="100%" height="100%">
    <defs>
        <linearGradient id="gradient">
            <stop offset="-1.04974" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-2; 1" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.549739" stop-color="#EEEEEE">
                <animate attributeName="offset" values="-1.5; 1.5" dur="1s" repeatCount="indefinite"></animate>
            </stop>
            <stop offset="-0.0497395" stop-color="#D8D8D8">
                <animate attributeName="offset" values="-1; 2" dur="1s" repeatCount="indefinite"></animate>
            </stop>
        </linearGradient>
    </defs>
    <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
    </g>
</symbol>

Answer 1

对我来说，我有 display: none在我的 <svg>包含我的 <defs> 的标签和 <symbols> .

确保初始 svg 没有 display:none设置 - 使用 height: 0; width: 0; position: absolute; visibility: hidden反而。

同样如 Waruyama 的回答中所述，请确保 <defs>在 <symbol> 之外标签。

找到这个提示 here .