为什么不在另一个 LinearGradient 作品引用的 LinearGradient 内设置动画?

问题描述 投票:0回答:1
svg svg-animate
1个回答
0
投票

因为你在渐变中使用 id="a" 设置 y1 ,并且它会覆盖 id="reuseme" 中的任何设置。

任何属性/属性/停止点均从参考链中遇到的第一个梯度开始使用。

我已从下面的 id="a" 中删除了 y1,因此另一个渐变现在已动画化,因为它的 y1 不再被覆盖。

<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140">
<linearGradient id="reuseme" gradientUnits="userSpaceOnUse" spreadMethod="reflect">
    <stop offset="0" stop-color="red"/>
    <stop offset="1" stop-color="black"/>
    <animate attributeName="y1" dur="2s" repeatCount="indefinite" values="0%;150%;0%"/>
</linearGradient>
<linearGradient id="a" x1="22.677" x2="132.625" y2="338.835" href="#reuseme">
    <!-- moving <animate/> here does work -->
</linearGradient>
<rect fill="url(#a)" x="10" y="10" width="130" height="130"/>
</svg>
 

© www.soinside.com 2019 - 2024. All rights reserved.