我有一个svg精灵与<symbol>
trhat包含<linearGradient>
。我在<g>
这个梯度上用同样的<symbol>
提交fill="url(#id)"
。但是,当我在其他文档中加载<symbol>
和<use>
时,<linearGradient>
不会加载。我可以看到fill的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>
正如评论中指出的那样,将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>
对我来说,我在我的display: none
标签上有<svg>
,其中包含我的<defs>
和<symbols>
。
确保初始svg没有设置display:none
- 改为使用height: 0; width: 0; position: absolute; visibility: hidden
。
同样如Waruyama的回答所述,确保<defs>
不在<symbol>
标签之外。
发现这个提示here。