Question

是否可以为矩形/圆形/封闭路径设置渐变动画？此示例仅在两个梯度之间进行硬切换

SVG-具有两个已定义渐变的圆和路径

<svg width="900" height="500" viewBox="0 0 300 300">
  <defs>

    <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#00bc9b" />
      <stop offset="100%" stop-color="#5eaefd" />
    </linearGradient>
    <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#333" />
      <stop offset="100%" stop-color="#fff" />
    </linearGradient>

  </defs>

  <path transform="translate(-200,-200)" d="M 100 300 Q 150 50 200 250 Q 250 550 350 350 Q 350 50 400 250 C 450 550 450 50 500 300 C 550 50 550 550 600 300 A 50 50 0 1 1 100 300 " />
  <circle cx="200" cy="200" r="200" />

</svg>

CSS

circle, path {
  stroke: red;
  stroke-width: 20px;
  fill: transparent;
  animation-name: stroke;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}


@keyframes stroke {
  from {
    stroke: url(#gradient1);
  }
  to {
    stroke: url(#gradient2);
  }
}

Answer 1

尽管IE＆Edge不支持SMIL动画，但是您可以使用SMIL动画。

svg{width:90vh}
rect {
  stroke: url(#gradient1);
  }

<svg viewBox="0 0 500 300">
  <defs>
    <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#00bc9b">
        <animate attributeName="stop-color" attributeType="CSS" values="#00bc9b;#333;#00bc9b;" dur="5s" repeatCount="indefinite"></animate>
      </stop>
      <stop offset="100%" stop-color="#5eaefd">
        <animate attributeName="stop-color" attributeType="CSS" values="#5eaefd;#f00;#5eaefd;" dur="5s" repeatCount="indefinite"></animate>
      </stop>
    </linearGradient>
   
  </defs>
  <rect width="400" height="200" x="10" y="20" 
        stroke-width="20" 
        fill="transparent"
        > 
  </rect>
</svg>

可以对笔触渐变进行动画处理吗？

1 个答案: