动画 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 background 属性为 SVG 渐变集设置动画？

为此，将带有动画的 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>

Answer 2

我已经能够使用animate inside 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>