我有一个圆盘状的SVG,我想要套用一种颜色,这些颜色从中心向外放射成一圈,同时还保持边缘(即,不透明)的透明性,类似于物体的存在没有应用的动画。
以下是动画版本的主要障碍:
不保留边缘透明度。在某些情况下,我可以通过覆盖相似的形状来解决此问题,以使边缘透明性具有与目标对象的背景色互补的颜色-但在这种情况下,对象位于渐变之上。
循环将重置为配置的值values="1%; ..."
,而不是平滑地循环/循环颜色。不知道如何解决这个问题,或者不确定是否可以使用径向动画。
提前感谢您的任何想法/建议!
<div style="background: linear-gradient(#231f20 0%, #231f20 21%, rgba(31, 28, 29, 0.89) 49%, rgba(20, 18, 18, 0.57) 74%, rgba(1, 1, 1, 0.02) 99%, rgba(0, 0, 0, 0) 100%);">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="gradient">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="24%" stop-color="#ffd600"/>
<stop offset="42%" stop-color="#a6cd57"/>
<stop offset="61%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradient')" />
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="gradientAnimate">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="10%" stop-color="#ffd600"/>
<stop offset="20%" stop-color="#a6cd57"/>
<stop offset="30%" stop-color="#f8971f"/>
<stop offset="40%" stop-color="#f8971f"/>
<stop offset="50%" stop-color="#d6d2c4"/>
<stop offset="70%" stop-color="#ffd600"/>
<stop offset="80%" stop-color="#a6cd57"/>
<stop offset="90%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
<animate attributeName="r" dur="5s" repeatCount="indefinite"
values="50%; 100%; 300%" />
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradientAnimate')" />
</svg>
</div>
答案 0 :(得分:0)
解决此问题的方法是应用蒙版:从白色到黑色的径向渐变圆:
<div style="background: linear-gradient(#231f20 0%, #231f20 21%, rgba(31, 28, 29, 0.89) 49%, rgba(20, 18, 18, 0.57) 74%, rgba(1, 1, 1, 0.02) 99%, rgba(0, 0, 0, 0) 100%);">
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="gradient">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="24%" stop-color="#ffd600"/>
<stop offset="42%" stop-color="#a6cd57"/>
<stop offset="61%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradient')" />
</svg>
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="300" style="display:inline-block;">
<defs>
<radialGradient id="rg">
<stop offset="50%" stop-color="#fff"></stop>
<stop offset="100%" stop-color="#000"></stop>
</radialGradient>
<mask id="maskCirc">
<circle cx="5" cy="5" r="4" fill="url(#rg)"></circle>
</mask>
<radialGradient id="gradientAnimate">
<stop offset="0%" stop-color="#d6d2c4"/>
<stop offset="10%" stop-color="#ffd600"/>
<stop offset="20%" stop-color="#a6cd57"/>
<stop offset="30%" stop-color="#f8971f"/>
<stop offset="40%" stop-color="#f8971f"/>
<stop offset="50%" stop-color="#d6d2c4"/>
<stop offset="70%" stop-color="#ffd600"/>
<stop offset="80%" stop-color="#a6cd57"/>
<stop offset="90%" stop-color="#f8971f"/>
<stop offset="100%" stop-color="#f8971f" stop-opacity="0"/>
<animate attributeName="r" dur="5s" repeatCount="indefinite"
values="50%; 100%; 300%" />
</radialGradient>
</defs>
<!-- radial gradient animation -->
<circle cx="5" cy="5" r="4" fill="url('#gradientAnimate')" style="mask: url(#maskCirc);"/>
</svg>
</div>