设置为背景图像的动画 svg 渐变

Question

是否可以使用 css background 属性对 SVG 渐变集进行动画处理？

我试过使用 SVG animate 元素，这里是一个例子：

<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern-0" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
      <rect x="0" y="0" width="50" height="100" style="fill: black;"/>
    </pattern>
    <linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="221.781" y1="-17.569" x2="221.781" y2="162.313" gradientTransform="matrix(-0.999997, 0.002512, -0.002478, -0.986265, 326.399578, 161.652725)" spreadMethod="pad">
      <stop offset="0" style="stop-color: #4a87db;"/>
      <stop offset="1" style="stop-color: rgb(255, 255, 255);"/>
      <animate attributeName="x1" dur="5000ms" repeatCount="indefinite"
         from="0%" to="100%" />
    </linearGradient>
  </defs>
  <g id="svgg">
    <path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
  </g>
</svg>

但是动画并不流畅，我只想将蓝色从一种十六进制更改为另一种，而不是设置 x1 属性的动画。

Answer 1

我已经能够在 stop

中使用 animate 实现我想要的

<?xml version="1.0" encoding="utf-8"?>
<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="pattern-0" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse" viewBox="0 0 100 100">
      <rect x="0" y="0" width="50" height="100" style="fill: black;"/>
    </pattern>
    <linearGradient id="gradient-3" gradientUnits="userSpaceOnUse" x1="221.781" y1="-17.569" x2="221.781" y2="162.313" gradientTransform="matrix(-0.999997, 0.002512, -0.002478, -0.986265, 326.399578, 161.652725)" spreadMethod="pad">
      <stop offset="0" style="stop-color: #4a87db;">
          <animate attributeName="stop-color" values="#4a87db;#3176d6;#2668c3;#225bab;#2668c3;#3176d6;#4a87db" dur="8s" repeatCount="indefinite"></animate>
      </stop>
      <stop offset="1" style="stop-color: rgb(255, 255, 255);"/>
    </linearGradient>
  </defs>
  <g id="svgg">
    <path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
  </g>
</svg>

Answer 2

is it possible to animate an SVG gradient set using css background property?

为此，将带有动画的 SVG 代码添加到 CSS

background-image: url("data:image/svg+xml,%3Csvg id='svg' version='1.1' style='display: block;'...

要获得这种形式的记录，您需要使用 SVG-encoder

对 svg 进行编码

渐变色动画

要改变渐变的颜色，可以使用stop offset属性的动画

<svg id="svg" version="1.1" style="display: block;" viewBox="0.148 0.121 399.909 187.745" xmlns="http://www.w3.org/2000/svg">
  <defs>
   
    <linearGradient id="gradient-3"  x1="100%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="0" style="stop-color: #4a87db;">
       <animate dur="4s" attributeName="offset" fill="freeze" values="0;1;1;0" repeatCount="indefinite" />
       </stop>
      <stop offset="1" style="stop-color: #A6BCDB;">
      <animate dur="4s" attributeName="offset" fill="freeze" values="0;1;1;0" repeatCount="indefinite" />
       </stop>
    </linearGradient>
  </defs>
  <g id="svgg">
    <path id="path1" d="M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0" stroke="none" fill-rule="evenodd" style="fill: url(#gradient-3);"/>
  </g>
</svg>

将此编码的 svg 文件添加到 background-image

div {
    width:  800px;
    height: 500px;
background-image: url("data:image/svg+xml,%3Csvg id='svg' version='1.1' style='display: block;' viewBox='0.148 0.121 399.909 187.745' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient-3' x1='100%25' y1='0%25' x2='100%25' y2='100%25' spreadMethod='pad'%3E%3Cstop offset='0' style='stop-color: %234a87db;'%3E%3Canimate dur='4s' attributeName='offset' fill='freeze' values='0;1;1;0' repeatCount='indefinite' /%3E%3C/stop%3E%3Cstop offset='1' style='stop-color: %23A6BCDB;'%3E%3Canimate dur='4s' attributeName='offset' fill='freeze' values='0;1;1;0' repeatCount='indefinite' /%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg id='svgg'%3E%3Cpath id='path1' d='M 0.317 160.263 C 0.491 160.322 54.672 181.321 96.41 186.555 C 138.827 191.875 170.592 177.656 200.188 146.3 C 235.21 109.196 258.892 111.366 299.457 117.682 C 336.776 123.493 399.859 155.012 399.781 157.423 C 399.76 158.082 400 0 400 0 L 0 0' stroke='none' fill-rule='evenodd' style='fill: url(%23gradient-3);'/%3E%3C/g%3E%3C/svg%3E%0A") ;
background-repeat: no-repeat;
}

<div></div>

设置为背景图像的动画 svg 渐变

Animate svg gradient set as background-image

html

css

svg

svg-animate