动画svg梯度设置为背景图像

Question

是否可以使用css background属性动画SVG梯度集？

我尝试使用SVG 动画制作元素，下面是一个示例：

​

<?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

是否可以使用css背景属性来动画SVG梯度集？

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

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

要获得这种形式的记录，需要使用SVG编码器对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>

​

Answer 2

我已经能够使用animate在stop中实现我想要的

​

<?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>

​