Question

我有一个带<symbol>的svg子画面，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

如评论中所指出，将linearGradient放在symbol之外。

这是一个有效的修改示例：

<svg style="visibility:hidden; width: 0; height: 0;">
  <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>
    <symbol id="symbol1" viewBox="0 0 550 90" width="100%" height="100%">
      <g fill="url(#gradient)">
        <rect x="0" y="0" width="100" height="15"/> 
        <rect x="10" y="25" width="130" height="15" />                              
      </g>
    </symbol>
  </defs> 
</svg>


<svg width="400" height="400">
  <use xlink:href="#symbol1"></use>
</svg>

Answer 2

对我来说，我的display: none标签上有<svg>，其中包含我的<defs>和<symbols>。

请确保未设置初始svg，请改用display:none。

另外，正如Waruyama的回答中所述，请确保height: 0; width: 0; position: absolute; visibility: hidden在<defs>标签之外。

找到了此提示here。

SVG符号中的线性渐变

2 个答案: