Question

我有一个简单的外圈svg，使用以下代码

创建

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        id="Layer_1"
        data-name="Layer 1"
        viewBox="0 0 260 260">
        <style>
            .class1 {
                fill-opacity:1;
                fill:url(#grayGradient);
            }
        </style>
        <defs>
            <linearGradient id="grayGradient"
                gradientUnits="userSpaceOnUse"
                x1="0" y1="130" x2="260" y2="130">
                <stop offset="0" style="stop-color:#919191;stop-opacity:1;" />
                <stop offset="1" style="stop-color:#919191;stop-opacity:0;" />
            </linearGradient>
        </defs>
        <title>outer circle</title>
        <path
            d="M130,0A130,130,0,1,0,260,130,130,130,0,0,0,130,0Zm.36,235a105,105,0,1,1,105-105A105,105,0,0,1,130.36,235Z"
            class="class1" />
    </svg>

我试图让它看起来像一个不确定的进度圆，所以我想围绕圆的路径旋转渐变。我知道如果我将一个gradientTransform = rotate（）属性添加到linearGradient，它将移动圆圈中渐变的位置。

是否可以为gradientTransform设置动画，以便显示圆圈正在旋转？

我对svg很新。也许有更好的方法来实现我正在寻找的效果？我确实需要使用具有相同形状的svg图像。

感谢您提出的任何建议......

Answer 1

只需在<linearGradient> ... </linearGradient>内添加以下字符串：

<animateTransform
  attributeName="gradientTransform"
  type="rotate"
  from="0 130 130"
  to="360 130 130"
  dur="1s"
  repeatCount="indefinite"
/>

但是它不能在IE和Safari中使用。

是否可以为svg图像的线性渐变gradientTransform属性设置动画

1 个答案: