svg 实现渐变圆环旋转效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了svg 实现渐变圆环旋转效果相关的知识，希望对你有一定的参考价值。
参考技术A <svg width="100%" height="50%" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs>
<linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="red" stop-opacity="0.4" />
<stop offset="100%" stop-color="red" stop-opacity="0.8" />
</linearGradient>
<linearGradient id="linear2" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" stop-color="red" stop-opacity="0.4" />
<stop offset="100%" stop-color="red" stop-opacity="0" />
</linearGradient>
</defs>
<path class="tsetst" d="M 110 10 a 100 100 0 0 1 0 200" fill="none" stroke="url(#linear1)" stroke-width="10">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 110 110" to="360 110 110"
additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
<path class="tsetst" d="M 110 10 a 100 100 0 0 1 0 200" transform="translate(220.1,220)rotate(180)" fill="none"
stroke="url(#linear2)" stroke-width="10">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 110 110" to="360 110 110"
additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
<svg width="100%" height="20%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" style="fill: #ff9; stroke: black;">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 25 25" to="360 25 25"
additive="sum" begin="0s" dur="2s" repeatCount="indefinite"></animateTransform>
</rect>
</svg>
以上是关于svg 实现渐变圆环旋转效果的主要内容，如果未能解决你的问题，请参考以下文章