我有一个带有 <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>
最佳答案
对我来说,我有 display: none
在我的 <svg>
包含我的 <defs>
的标签和 <symbols>
.
确保初始 svg 没有 display:none
设置 - 使用 height: 0; width: 0; position: absolute; visibility: hidden
反而。
同样如 Waruyama 的回答中所述,请确保 <defs>
在 <symbol>
之外标签。
找到这个提示 here .
关于svg - SVG 符号中的线性渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52439187/