svg动画 2023年
svg在线编辑
http://svg.wxeditor.com/
三种控制动画的方案：
js控制
function drawSVGPaths(_parentElement, _timeMin, _timeMax) { let paths = $(_parentElement).find('path'); $.each( paths, function(i) { let totalLength = this.getTotalLength(); //set paths to invisible $(this).css({ 'stroke-dashoffset': totalLength, 'stroke-dasharray': totalLength + ' ' + totalLength }); $(this).animate({ 'stroke-dashoffset': 0 }, { duration: Math.floor(Math.random() * _timeMax) + _timeMin }); }); } function startSVGAnimation(parentElement) { drawSVGPaths(parentElement, 5000, 10000, 0); } startSVGAnimation($('svg'));;
css控制
<!DOCTYPE html> <html> <head> <title>svg demo</title> <style type="text/css"> #line{ transition: all 2s; stroke-dasharray:270,270; stroke-dashoffset:270; } svg:hover #line{ stroke-dashoffset: 0; } #circle{ transition: all 2s; stroke-dasharray:314,314; stroke-dashoffset:314; } svg:hover #circle{ stroke-dashoffset:0; } </style> </head> <body> <h3>线段区域</h3> <svg width="100%" height="400" > <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#05a"/> <stop offset="100%" stop-color="#0a5"/> </linearGradient> <line id="line" x1="30" y1="30" x2="300" y2="30.1" stroke-width="20" stroke="url(#linear)" /> </svg> <h3>圆区域</h3> <svg width="200" height="200" viewBox="0 0 200 200"> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#05a"/> <stop offset="100%" stop-color="#0a5"/> </linearGradient> <circle id="circle" cx="100" cy="80" r="50" fill="green" stroke-width="5" stroke="url(#linear)" /> </svg> </body> </html>
这里需要注意这个line，是水平的，y1和y2不能相等，相等就出不来效果了，原因我也不知道
<line id="line" x1="30" y1="30" x2="300" y2="30.1" stroke-width="20" stroke="url(#linear)" />
标签控制
<html lang="en"> <head> <meta charset="UTF-8"> <title>HTML SVG指纹扫描动画特效 www.bootstrapmb.com</title> <link rel="stylesheet" href="./style-zw.css"> </head> <body> <svg class="fingerprint" viewBox="0 0 100 100"> <linearGradient id="scan" gradientTransform="rotate(90)"> <stop offset="0%" stop-color="rgba(0, 250, 255, 0)"></stop> <stop offset="40%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="49%" stop-color="rgba(0, 250, 255, 0.7)"></stop> <stop offset="50%" stop-color="rgba(0, 250, 255, 1)"></stop> <stop offset="51%" stop-color="rgba(0, 250, 255, 0.7)"></stop> <stop offset="60%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="100%" stop-color="rgba(0, 250, 255, 0)"></stop> </linearGradient> <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#05a"/> <stop offset="100%" stop-color="#0a5"/> </linearGradient> <g class="creases" fill="none" stroke="#0df" stroke-width="3.3" stroke-linecap="round"> <path d="M 50 50 Q 50 73.4 20.3 84.2"> <animate attributeName="stroke-dasharray" values="0; 54; 0" dur="6s" repeatCount="indefinite" begin="-1.1s"></animate> </path> <path d="M 26.6 88.7 Q 58.1 76.1 58.1 50 C 58.1 43.7 50.9 41 47.3 42.8 C 40.1 46.4 43.7 50 41 59 Q 36.5 73.4 14.9 78.8"> <animate attributeName="stroke-dasharray" values="0; 134.77; 0" dur="6s" repeatCount="indefinite" begin="-5.57s"></animate> </path> <path d="M 33.8 92.3 Q 66.2 78.8 66.2 50 C 66.2 37.4 55.4 34.7 50 34.7 C 33.8 34.7 35.6 49.1 33.8 57.2 Q 31.1 69.8 10.4 72.5"> <animate attributeName="stroke-dasharray" values="0; 159.42; 0" dur="6s" repeatCount="indefinite" begin="-3.22s"></animate> </path> <path d="M 50 93.2 Q 72.5 81.5 75.2 50 C 76.1 32.9 60.8 26.6 50 26.6 C 25.7 26.6 28.4 45.5 26.6 54.5 Q 24.8 65.3 7.7 65.3"> <animate attributeName="stroke-dasharray" values="0; 174.55; 0" dur="6s" repeatCount="indefinite" begin="-1.54s"></animate> </path> <path d="M 68 88.7 Q 82.4 72.5 83.3 50 C 84.2 29.3 68.9 17.6 50 17.6 C 19.4 17.6 20.3 41.9 18.5 50.9 Q 17.6 57.2 6.8 58.1"> <animate attributeName="stroke-dasharray" values="0; 180.14; 0" dur="6s" repeatCount="indefinite" begin="0s"></animate> </path> <path d="M 86.9 71.6 Q 90.5 64.4 91.4 50 C 93.2 2.3 20.3 -8.5 12.2 38.3 Q 11.3 43.7 10.4 47.3"> <animate attributeName="stroke-dasharray" values="0; 166.88; 0" dur="6s" repeatCount="indefinite" begin="-4.67s"></animate> </path> </g> <path d="M 50 0 H 100 V 100 H 0 V 0 H 50" fill="none" stroke="#0df" stroke-width="3" stroke-dasharray="0 25 50 25"></path> <rect x="0.5" y="0" height="100" width="99" fill="url(#scan)"> <animate attributeName="y" values="-50; 50; -50" dur="6s" repeatCount="indefinite" begin="0s"></animate> </rect> <circle id="circle" cx="10" cy="110" r="3" fill="rgba(0, 250, 255, 1)" stroke-width="5" stroke="green" stroke-opacity="0.1"> <animate attributeName="cy" values="100; 0" dur="2s" repeatCount="indefinite" begin="0s"></animate> <animate attributeName="opacity" values="1; 0.8; 0.1" dur="2s" repeatCount="indefinite" begin="0s"></animate> </circle> <circle id="circle" cx="80" cy="110" r="3" fill="rgba(0, 250, 255, 1)" stroke-width="5" stroke="green" stroke-opacity="0.1"> <animate attributeName="cy" values="100; 0" dur="2s" repeatCount="indefinite" begin="0.5s"></animate> <animate attributeName="opacity" values="1; 0.8; 0.1" dur="2s" repeatCount="indefinite" begin="0.5s"></animate> </circle> <circle id="circle" cx="40" cy="110" r="3" fill="rgba(0, 250, 255, 1)" stroke-width="5" stroke="green" stroke-opacity="0.1"> <animate attributeName="cy" values="100; 0" dur="2s" repeatCount="indefinite" begin="1s"></animate> <animate attributeName="opacity" values="1; 0.8; 0.1" dur="2s" repeatCount="indefinite" begin="1s"></animate> </circle> </svg> </body> </html>
沿路径运动：
<html lang="en"><head> <meta charset="UTF-8"> <title>js svg流光特效圣诞树</title> <link rel="stylesheet" href="./style-lgsds.css"> </head> <body> <svg class="mainSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" style="visibility: visible;"> <defs> <radialGradient id="dotGrad" cx="0" cy="0" r="50" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:1"></stop> <stop offset="0.1" style="stop-color:#0867C7;stop-opacity:0.6"></stop> <stop offset="1" style="stop-color:#081029;stop-opacity:0"></stop> </radialGradient> <mask id="treePathMask"> <path class="treePathMask" fill="none" stroke-width="18" stroke="#FFF" d="M252.9,447.9c0,0-30.8-21.6,33.9-44.7c64.7-23.1,46.2-37,33.9-41.6 c-12.3-4.6-59.3-11.6-42.4-28.5s114-52.4,81.7-66.2c-32.4-13.9-58.5-10.8-35.4-29.3s66.2-101.7,70.9-115.6 c4.4-13.2,16.9-18.5,24.7,0c7.7,18.5,44.7,100.1,67.8,115.6c23.1,15.4-10.8,21.6-26.2,24.7c-15.4,3.1-20,33.9,33.9,49.3 c53.9,15.4,47.8,40.1,27.7,44.7c-20,4.6-63.2,4.6-27.7,32.4s98.6,21.6,61.6,60.1" style="stroke: rgb(255, 255, 255);"></path> </mask> <mask id="treeBottomMask"> <path class="treeBottomMask" stroke="#FFF" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9" style="stroke: rgb(255, 255, 255);"></path> </mask> <mask id="treePotMask"> <path class="treePotMask" stroke="#FFF" stroke-width="8" d="M374.3,502.5c0,0-4.6,20,7.7,29.3c12.3,9.2,40.1,7.7,50.8,0s10.8-23.1,10.8-29.3" style="stroke: rgb(255, 255, 255);"></path> </mask> </defs> <g class="whole"> <g class="tree" mask="url(#treePathMask)"> <path d="M252.95,447.85a20.43,20.43,0,0,1-5.64-6.24,14,14,0,0,1-1.91-8.22,16.93,16.93,0,0,1,3.06-8,33.16,33.16,0,0,1,5.79-6.28A74.78,74.78,0,0,1,268.54,410a163.48,163.48,0,0,1,15.52-6.84c10.54-3.93,21-8.07,30.72-13.46a80.83,80.83,0,0,0,7-4.37,37.51,37.51,0,0,0,6.13-5.24c1.75-1.92,3.14-4.18,3.25-6.35s-1.12-4.18-3-5.81a25,25,0,0,0-6.72-3.91,61.25,61.25,0,0,0-7.8-2.42c-5.41-1.4-10.91-2.72-16.38-4.32a84.17,84.17,0,0,1-16.2-6.19,28.26,28.26,0,0,1-3.86-2.5,15.06,15.06,0,0,1-3.44-3.63,9,9,0,0,1-1.51-5.47,10.22,10.22,0,0,1,.61-2.78,12.88,12.88,0,0,1,1.2-2.34,26.73,26.73,0,0,1,6.58-6.56c2.35-1.76,4.76-3.33,7.19-4.84,4.87-3,9.82-5.75,14.77-8.46,9.91-5.4,19.88-10.59,29.63-16.08,4.87-2.75,9.68-5.56,14.33-8.56A81.88,81.88,0,0,0,359.45,280a23,23,0,0,0,2.41-2.79,8.36,8.36,0,0,0,1.35-2.65,2.13,2.13,0,0,0-.17-1.7,5.53,5.53,0,0,0-1.88-1.77,13.15,13.15,0,0,0-1.49-.83c-.52-.26-1.1-.49-1.76-.77-1.27-.53-2.55-1-3.83-1.53q-3.86-1.48-7.8-2.77c-5.26-1.74-10.6-3.23-16-4.79-2.72-.79-5.47-1.58-8.29-2.61a31.74,31.74,0,0,1-4.33-1.92,14.39,14.39,0,0,1-2.29-1.53,8.74,8.74,0,0,1-2.22-2.66,7.2,7.2,0,0,1-.78-4,9.09,9.09,0,0,1,1-3.24,18.93,18.93,0,0,1,3-4.21,44.88,44.88,0,0,1,3.29-3.19c.56-.5,1.12-1,1.68-1.45l1.61-1.33a84,84,0,0,0,10.88-11.88,326.2,326.2,0,0,0,18.79-27.53c5.88-9.5,11.48-19.19,16.89-29S380.1,146.16,385,136.13c1.22-2.51,2.42-5,3.57-7.54s2.29-5.09,3.14-7.45l.36-1c.14-.38.26-.75.42-1.12.29-.75.64-1.48,1-2.21a25.51,25.51,0,0,1,2.65-4.21,19.15,19.15,0,0,1,3.76-3.69,13.74,13.74,0,0,1,5.24-2.42,12.11,12.11,0,0,1,6.12.25,14.59,14.59,0,0,1,5,2.79,20.59,20.59,0,0,1,3.47,3.79,30.33,30.33,0,0,1,2.5,4.1c.35.7.7,1.39,1,2.1l.46,1.05.4,1,1.64,3.84,3.39,7.67q6.88,15.32,14.36,30.37c5,10,10.18,19.94,15.69,29.65a274.94,274.94,0,0,0,17.9,28A73.36,73.36,0,0,0,487.74,233c.49.4,1,.8,1.48,1.15l1.7,1.19a35,35,0,0,1,3.66,3,17.84,17.84,0,0,1,3.32,4.08,10.83,10.83,0,0,1,1.14,2.94,8.54,8.54,0,0,1,0,3.54,10.27,10.27,0,0,1-3.22,5.39,20.71,20.71,0,0,1-4.15,2.91,49,49,0,0,1-8.4,3.46,154,154,0,0,1-16.77,4.09l-4.15.81a9.18,9.18,0,0,0-2.87,1.08,9.51,9.51,0,0,0-4,4.7,12.55,12.55,0,0,0-.67,6.58,19.5,19.5,0,0,0,2.46,6.74A37.19,37.19,0,0,0,468,295.75a75,75,0,0,0,14.14,7.86,129.67,129.67,0,0,0,15.58,5.49A141.4,141.4,0,0,1,513.88,315a75,75,0,0,1,15.19,8.65,37.29,37.29,0,0,1,6.55,6.24,21.05,21.05,0,0,1,4.31,8.49,14.43,14.43,0,0,1-1.24,9.88,18.08,18.08,0,0,1-6.66,6.94,26.74,26.74,0,0,1-8.56,3.33c-2.84.61-5.65,1.06-8.44,1.49-5.58.86-11.13,1.61-16.52,2.77a53.48,53.48,0,0,0-7.81,2.22c-2.43.94-4.81,2.22-6,3.93a4.34,4.34,0,0,0-.77,2.82,8.45,8.45,0,0,0,1,3.29,28,28,0,0,0,4.82,6.25,80.74,80.74,0,0,0,12.81,10.4c9.29,6,19.72,10.29,30.24,14.17,5.27,1.95,10.59,3.79,15.85,5.86,2.63,1,5.24,2.14,7.79,3.39a37.94,37.94,0,0,1,7.28,4.51,11.9,11.9,0,0,1,3.63,15.57,34.68,34.68,0,0,1-4.53,7.16,77.45,77.45,0,0,1-5.64,6.29,77.31,77.31,0,0,0,5.41-6.46,34.27,34.27,0,0,0,4.22-7.21,12.64,12.64,0,0,0,.88-8,12.44,12.44,0,0,0-4.71-6.43,37.71,37.71,0,0,0-7.15-4.16c-2.53-1.16-5.13-2.18-7.76-3.14-5.26-1.91-10.62-3.62-16-5.44-10.65-3.63-21.34-7.64-31.11-13.64a83.84,83.84,0,0,1-13.61-10.49,31.27,31.27,0,0,1-5.6-6.94,12,12,0,0,1-1.55-4.68,8.17,8.17,0,0,1,.19-2.7,8.56,8.56,0,0,1,1.09-2.5,12.1,12.1,0,0,1,3.6-3.44,24.27,24.27,0,0,1,4.08-2.08,57.3,57.3,0,0,1,8.36-2.56c5.59-1.31,11.19-2.17,16.71-3.12,2.76-.48,5.5-1,8.15-1.59a22.1,22.1,0,0,0,7-2.87,13.3,13.3,0,0,0,4.82-5.15,9.42,9.42,0,0,0,.69-6.53,16,16,0,0,0-3.42-6.33,33.25,33.25,0,0,0-5.73-5.27,69.74,69.74,0,0,0-14.19-7.8,135.81,135.81,0,0,0-15.61-5.42,135.53,135.53,0,0,1-16.3-5.51,81,81,0,0,1-15.41-8.31,43.39,43.39,0,0,1-12.6-13,25.53,25.53,0,0,1-3.34-9,19.13,19.13,0,0,1,1-10,16.17,16.17,0,0,1,6.69-8,15.88,15.88,0,0,1,5-1.93l4.13-.84a147.75,147.75,0,0,0,16-4,42.41,42.41,0,0,0,7.17-3,14,14,0,0,0,2.74-1.92,3.42,3.42,0,0,0,1.12-1.68,2.41,2.41,0,0,0-.43-1.61,11.07,11.07,0,0,0-2-2.4,28,28,0,0,0-2.92-2.31l-1.76-1.22c-.65-.46-1.26-.94-1.86-1.43a59,59,0,0,1-6.43-6.27c-2-2.19-3.79-4.44-5.54-6.74a267,267,0,0,1-18.55-28.74c-5.63-9.85-10.89-19.86-16-30s-9.91-20.31-14.57-30.61l-3.45-7.76L417,124.48l-.42-1-.39-.88c-.25-.59-.54-1.15-.82-1.71a22.74,22.74,0,0,0-1.89-3.09,13,13,0,0,0-2.2-2.42,7,7,0,0,0-2.31-1.33,4.49,4.49,0,0,0-2.22-.09,8.55,8.55,0,0,0-4.59,3.32,17.85,17.85,0,0,0-1.84,2.92c-.26.54-.51,1.07-.73,1.64-.12.27-.22.56-.32.85l-.35,1c-1.06,2.93-2.23,5.47-3.42,8.1s-2.42,5.16-3.67,7.7c-5,10.18-10.29,20.16-15.77,30.05s-11.17,19.66-17.16,29.28a310.2,310.2,0,0,1-19.39,28.11,90.46,90.46,0,0,1-12,12.85l-1.65,1.35c-.52.43-1,.85-1.53,1.29a38,38,0,0,0-2.79,2.65,12.42,12.42,0,0,0-1.94,2.57,2.33,2.33,0,0,0-.28.76c0,.11,0,0,0,.09a4.57,4.57,0,0,0,1.7,1.35,25.15,25.15,0,0,0,3.36,1.51c2.46.92,5.11,1.72,7.79,2.52,5.36,1.58,10.84,3.16,16.25,5q4.06,1.37,8.08,2.94c1.34.53,2.67,1.07,4,1.63.64.27,1.36.57,2.1.94a19.66,19.66,0,0,1,2.18,1.24,11.85,11.85,0,0,1,4,4.13,8.64,8.64,0,0,1,1,3.24,9.11,9.11,0,0,1-.27,3.23,14.48,14.48,0,0,1-2.42,4.85,29.32,29.32,0,0,1-3.14,3.56,87.46,87.46,0,0,1-14,10.47c-4.85,3-9.79,5.84-14.76,8.55-9.94,5.42-20,10.49-29.91,15.72-5,2.62-9.88,5.28-14.63,8.12-2.37,1.42-4.7,2.89-6.88,4.46a22.06,22.06,0,0,0-5.45,5.14,8,8,0,0,0-.76,1.39,5.36,5.36,0,0,0-.33,1.32,4.1,4.1,0,0,0,.69,2.53,15.62,15.62,0,0,0,5.49,4.62A80.14,80.14,0,0,0,298.56,353c5.31,1.66,10.73,3.06,16.18,4.58a64.81,64.81,0,0,1,8.26,2.74,27.74,27.74,0,0,1,7.69,4.74,13.65,13.65,0,0,1,3,3.81,9.27,9.27,0,0,1,1,5,11.14,11.14,0,0,1-1.54,4.7,19.09,19.09,0,0,1-2.8,3.67,40.6,40.6,0,0,1-6.81,5.54,83.78,83.78,0,0,1-7.41,4.35c-10.11,5.26-20.76,9.16-31.39,12.82a161.69,161.69,0,0,0-15.52,6.37A74.57,74.57,0,0,0,255,420a32.17,32.17,0,0,0-5.82,5.89,16.21,16.21,0,0,0-3.19,7.52,13.61,13.61,0,0,0,1.59,8A20.29,20.29,0,0,0,252.95,447.85Z" fill="#cb9866"></path> <path d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866"></path> <path d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866"></path> </g> <path class="treeBottomPath" stroke="none" fill="none" stroke-width="8" d="M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9"></path> <path class="treePath" fill="none" stroke="none" stroke-miterlimit="10" id="treePath" d="M252.95,447.85s-30.81-21.57,33.89-44.68,46.22-37,33.89-41.6-59.32-11.56-42.37-28.5,114-52.38,81.66-66.25S301.48,256,324.59,237.55,390.84,135.87,395.46,122c4.41-13.24,16.95-18.49,24.65,0s44.68,100.14,67.79,115.55-10.78,21.57-26.19,24.65-20,33.89,33.89,49.3,47.76,40.06,27.73,44.68-63.17,4.62-27.73,32.35,98.6,21.57,61.63,60.09 M207.5,484.1c0,0,58.5-43.1,211.1-3.1s191-16.9,191-16.9"></path> <path class="treeBottom" mask="url(#treeBottomMask)" d="M207.5,484.06c7.05-5.11,15.14-8.66,23.34-11.63a177.13,177.13,0,0,1,25.29-6.88,263.65,263.65,0,0,1,52.22-4.49h3.28l3.28.09,6.56.19,6.55.39c2.18.13,4.37.26,6.54.48,4.35.39,8.71.74,13,1.28l6.51.75,6.49.91c17.3,2.5,34.41,6,51.36,10.19l12.62,3.2c4.18,1,8.34,2.18,12.55,3.06,8.38,2,16.82,3.63,25.29,5.13a353.5,353.5,0,0,0,51.17,5.47c17.11.32,34.36-.66,51-4.7a118.55,118.55,0,0,0,24.21-8.47,84.82,84.82,0,0,0,11.11-6.49,47.55,47.55,0,0,0,9.69-8.53,48.1,48.1,0,0,1-9,9.45,85.1,85.1,0,0,1-10.81,7.45,116.56,116.56,0,0,1-24.23,10.24,165.66,165.66,0,0,1-25.79,5.35,232.1,232.1,0,0,1-26.27,1.71c-8.77,0-17.55-.24-26.26-1.09-2.18-.2-4.37-.35-6.54-.6l-6.52-.78c-4.36-.46-8.67-1.19-13-1.82-8.64-1.37-17.22-3.09-25.74-5-4.28-.87-8.5-2-12.75-3l-12.62-3.11q-25.06-6.37-50.58-10.47a426.37,426.37,0,0,0-51.3-5.3c-8.59-.42-17.19-.29-25.78,0a240.1,240.1,0,0,0-25.68,2.24,186.57,186.57,0,0,0-25.27,5.19c-4.15,1.16-8.26,2.49-12.28,4.05-2,.79-4,1.6-6,2.52A50.82,50.82,0,0,0,207.5,484.06Z" fill="#cb9866"></path> <path class="treePot" mask="url(#treePotMask)" d="M374.32,502.55a48.15,48.15,0,0,0,1.24,14.35c1.15,4.52,3.29,8.64,6.49,11.35a18.5,18.5,0,0,0,5.51,3.14,39.06,39.06,0,0,0,6.41,1.82,65.78,65.78,0,0,0,13.68,1.12,72.9,72.9,0,0,0,13.72-1.44,44.51,44.51,0,0,0,6.46-1.85,17.75,17.75,0,0,0,5.51-3.15,25.45,25.45,0,0,0,7.24-11.17,52,52,0,0,0,1.9-6.91c.48-2.37.83-4.8,1.18-7.25a55.16,55.16,0,0,1,.64,7.42,40.11,40.11,0,0,1-.52,7.56,31.23,31.23,0,0,1-2.19,7.5,24.37,24.37,0,0,1-4.46,6.79,25.16,25.16,0,0,1-6.61,5,39.72,39.72,0,0,1-7.4,3A58.55,58.55,0,0,1,407.75,542a55,55,0,0,1-15.47-1.9,36.65,36.65,0,0,1-7.46-3,25.3,25.3,0,0,1-6.6-5,19.63,19.63,0,0,1-2.5-3.34,21.72,21.72,0,0,1-1.79-3.67,27.66,27.66,0,0,1-1.65-7.7,38.16,38.16,0,0,1,2-14.87Z" fill="#cb9866"></path> <g class="treeStar" data-svg-origin="407.94639587402344 65.8066291809082" transform="matrix(0.15,0,0,0,346.75444,65.80663)" style="translate: none; rotate: none; scale: none; transform-origin: 0px 0px;"> <path class="treeStarOutline" opacity="0" d="M421,53.27c5,.83,10.08,1.52,15.15,2.13l3.8.45,1.9.21c.33,0,.6.06,1,.12a2.41,2.41,0,0,1,1.27.66,2.52,2.52,0,0,1,.56,2.76,3.42,3.42,0,0,1-.78,1.07l-.66.69-2.65,2.77c-1.78,1.83-3.54,3.68-5.35,5.48l-2.7,2.71L429.81,75l-.69.67-.34.33,0,0h0a.14.14,0,0,0,0-.08s0-.07,0,0l0,.24.07.47.57,3.78c.4,2.52.71,5,1.06,7.57l.94,7.59.22,1.9c0,.06,0,.19,0,.34a2.21,2.21,0,0,1,0,.43,2.72,2.72,0,0,1-.21.84,2.85,2.85,0,0,1-2.65,1.75,2.57,2.57,0,0,1-.82-.14,3.12,3.12,0,0,1-.65-.3l-1.64-1-6.58-3.91-6.63-3.81-3.34-1.86-.42-.23-.21-.12-.14-.07a1,1,0,0,0-.59,0,1.15,1.15,0,0,0-.31.12l-.43.22-.85.44c-2.27,1.17-4.54,2.31-6.79,3.52s-4.51,2.38-6.74,3.61l-3.36,1.83-.84.46a3.07,3.07,0,0,1-1.28.44,2.68,2.68,0,0,1-2.84-3l.15-1,.29-1.89.57-3.78,1.18-7.56,1.24-7.52a.13.13,0,0,0,0,.08l0,0-.1-.09-.17-.17-1.37-1.34-2.73-2.68-10.93-10.7-.34-.33a4,4,0,0,1-.64-.84,3.63,3.63,0,0,1-.43-2.12,3.68,3.68,0,0,1,2.64-3.17l.52-.11.25,0,.47-.06.95-.12,1.9-.25,7.58-1,7.6-.9,1.9-.23.95-.11c.24,0,.11,0,.09,0l-.09.05-.07.08,0,0,.09-.16.46-.84.91-1.68c2.41-4.5,4.95-8.92,7.51-13.34l1-1.66.48-.83.24-.41.13-.23a3.49,3.49,0,0,1,.22-.33,2.66,2.66,0,0,1,2.83-.9,2.52,2.52,0,0,1,1.26.84,2.85,2.85,0,0,1,.37.62l.18.44q1.45,3.54,3,7.06c1,2.36,2,4.68,3.06,7,.51,1.17,1.06,2.32,1.59,3.48l.8,1.74a2.12,2.12,0,0,0,.45.75A1.42,1.42,0,0,0,421,53.27Zm-.06.39a1.82,1.82,0,0,1-1-.46,2.52,2.52,0,0,1-.56-.86l-.84-1.72c-.56-1.14-1.11-2.3-1.69-3.43-1.17-2.27-2.29-4.56-3.5-6.81s-2.39-4.51-3.6-6.76l-.23-.42a.8.8,0,0,0-.14-.18.58.58,0,0,0-.33-.15.56.56,0,0,0-.57.28L407,36.48c-2.09,4.66-4.2,9.31-6.45,13.88l-.83,1.72-.42.86-.13.27a3.57,3.57,0,0,1-2,1.67,4.26,4.26,0,0,1-.84.18l-.95.13-1.89.27L386,56.53l-7.58,1-3.49.44a.45.45,0,0,0,.34-.4.51.51,0,0,0-.07-.28s-.06-.08-.07-.08l.33.34,10.65,11,2.66,2.75,1.33,1.37.4.42a3.41,3.41,0,0,1,.53.84,3.36,3.36,0,0,1,.24,1.95c-.53,2.56-1,5-1.57,7.52L388,90.85l-.83,3.73-.42,1.87-.2.9a.5.5,0,0,0,0,.3.58.58,0,0,0,.52.37,6.28,6.28,0,0,0,1.38-.58l3.46-1.62q3.47-1.61,6.9-3.3c2.3-1.1,4.57-2.26,6.85-3.39l.86-.43.43-.21a2.55,2.55,0,0,1,.57-.22,2.21,2.21,0,0,1,1.29.08l.29.13.21.11.42.23,3.37,1.81,6.8,3.51,6.85,3.41,1.71.85c.19.09.15.07.22.08a.25.25,0,0,0,.12,0,.42.42,0,0,0,.21-.1.33.33,0,0,0,.1-.19.2.2,0,0,0,0-.09.1.1,0,0,0,0,0l0-.13L428.74,96l-1.42-7.52c-.43-2.51-.9-5-1.29-7.54l-.6-3.78-.08-.47,0-.24a3.75,3.75,0,0,1,0-.45,3.37,3.37,0,0,1,.52-1.9,3.33,3.33,0,0,1,.3-.4,3.73,3.73,0,0,1,.3-.3l.35-.32.7-.65,2.81-2.59,2.86-2.54c1.9-1.71,3.84-3.36,5.77-5l2.91-2.49a12.91,12.91,0,0,0,1.15-1,.7.7,0,0,0-.06-.79.73.73,0,0,0-.37-.26c-.23-.06-.6-.13-.89-.2l-1.87-.4L436,56.39C431,55.39,426,54.45,420.95,53.66Z" fill="#FFFCF9"></path> <path d="M408.12,83.45l-17.78,8.94,3.72-19.55-14-14.15,19.74-2.5,9.13-17.68,8.48,18L437,59.73l-14.5,13.63,3,19.67Z" fill="#C89568"></path> </g> <circle class="sparkle" fill="url(#dotGrad)" cx="0" cy="0" r="50" data-svg-origin="0 0"> <animateMotion dur="6s" repeatCount="indefinite" keyPoints="0;1;0" keyTimes="0;0.5;1" calcMode="linear"> <mpath xlink:href="#treePath"></mpath> </animateMotion> </circle> </g> </svg> </body></html>
颜色渐变位移动画：
<svg width="1920" height="90" viewBox="0 0 1920 90" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <linearGradient id="scan-right-to-left" gradientTransform="rotate(0)"> <stop offset="0%" stop-color="rgba(0, 250, 255, 0)"></stop> <stop offset="40%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="49%" stop-color="rgba(255, 0, 0, 0.7)"></stop> <stop offset="50%" stop-color="rgba(255, 0, 0, 1)"></stop> <stop offset="51%" stop-color="rgba(255, 0, 0, 0.7)"></stop> <stop offset="60%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="100%" stop-color="rgba(0, 250, 255, 0)"></stop> <animate attributeName="x1" from="-100%" to="100%" dur="3s" repeatCount="indefinite" begin="0s"></animate> </linearGradient> <linearGradient id="scan-left-to-right" x1="0%" x2="100%" y1="0%" y2="0%" gradientTransform="rotate(0)"> <stop offset="0%" stop-color="rgba(0, 250, 255, 0)"></stop> <stop offset="40%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="49%" stop-color="rgba(255, 0, 0, 0.7)"></stop> <stop offset="50%" stop-color="rgba(255, 0, 0, 1)"></stop> <stop offset="51%" stop-color="rgba(255, 0, 0, 0.7)"></stop> <stop offset="60%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="100%" stop-color="rgba(0, 250, 255, 0)"></stop> <animate attributeName="x2" from="200%" to="0%" dur="3s" repeatCount="indefinite" begin="0s"></animate> </linearGradient> <linearGradient id="scan-left-to-right2" x1="-100%" x2="0%" y1="0%" y2="0%" gradientTransform="rotate(180)"> <stop offset="0%" stop-color="rgba(0, 250, 255, 0)"></stop> <stop offset="40%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="49%" stop-color="rgba(255, 0, 0, 0.7)"></stop> <stop offset="50%" stop-color="rgba(255, 0, 0, 1)"></stop> <stop offset="51%" stop-color="rgba(255, 0, 0, 0.7)"></stop> <stop offset="60%" stop-color="rgba(0, 250, 255, 0.3)"></stop> <stop offset="100%" stop-color="rgba(0, 250, 255, 0)"></stop> <animate attributeName="x1" from="-200%" to="0%" dur="3s" repeatCount="indefinite" begin="0s"></animate> </linearGradient> <g clip-path="url(#clip0_694_2401)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M696.518 67.1777L646.522 0.183594H0V9.68276H454.039C454.039 9.68276 554.887 9.68276 568.529 9.68276C586.667 9.68276 597.666 16.1632 611.025 33.6807C620.319 45.3881 623.165 51.551 643.68 57.718C664.074 65.8098 699.517 71.1774 699.517 71.1774L696.518 67.1777Z" fill="rgba(0, 250, 255, 0.1)" stroke="url(#scan-right-to-left)" stroke-width="10" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M1220.97 67.1777L1270.97 0.183594H1918.99V9.68276H1463.45C1463.45 9.68276 1362.6 9.68276 1348.96 9.68276C1330.82 9.68276 1319.82 16.1632 1306.46 33.6807C1297.17 45.3881 1294.25 53.5792 1271.28 57.8563C1250.14 63.7038 1217.97 71.1774 1217.97 71.1774L1220.97 67.1777Z" fill="rgba(0, 250, 255, 0.1)" stroke="url(#scan-left-to-right)" stroke-width="10"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M611.614 14.748H642.611L645.111 17.7478H614.114L611.614 14.748Z" fill="#00C0E1"/> <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M617.613 22.248H648.61L651.11 25.2478H620.113L617.613 22.248Z" fill="#00C0E1"/> <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M624.112 29.7471H655.11L659.609 34.7466H628.612L624.112 29.7471Z" fill="#00C0E1"/> <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M632.112 39.2461H663.11L677.608 56.2446L636.611 44.2457L632.112 39.2461Z" fill="#00C0E1"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M1308.05 14.748H1277.06L1274.56 17.7478H1305.55L1308.05 14.748Z" fill="#00C0E1"/> <path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1302.05 22.248H1271.06L1268.56 25.2478H1299.55L1302.05 22.248Z" fill="#00C0E1"/> <path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M1295.55 29.7471H1264.56L1260.06 34.7466H1291.05L1295.55 29.7471Z" fill="#00C0E1"/> <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M1287.56 39.2461H1256.56L1242.06 56.2446L1283.06 44.2457L1287.56 39.2461Z" fill="#00C0E1"/> </g> </svg>
注意：
x1 y1 x2 y2的默认值是
x1="0%" x2="100%" y1="0%" y2="0%"
scan-left-to-right2 和 scan-left-to-right 这两个的效果是一样的，一个是反转180度，移动x1，一个是直接移动x2
transform变换
渐变光旋转案例
rotate（角度 旋转中心点x 旋转中心点y）
rotate（角度） 不指定旋转的中心点 则以0 0 点为中心点旋转
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9765 13.678C43.1757 13.678 52.2548 22.7567 52.2548 33.9563C52.2548 45.1554 43.1757 54.2345 31.9765 54.2345C20.7769 54.2345 11.6982 45.1554 11.6982 33.9563C11.6982 22.7567 20.7769 13.678 31.9765 13.678Z" stroke="url(#paint2_linear_348_227)"/> <linearGradient id="paint2_linear_348_227" x1="31.9765" y1="14.678" x2="31.9765" y2="55.2346" gradientUnits="userSpaceOnUse"> <stop stop-color="#1262FF"/> <stop offset="0.552083" stop-color="white"/> <stop offset="1" stop-color="#1262FF"/> <animateTransform attributeName="gradientTransform" type="rotate" values="360 31.9765 34.9563; 0 31.9765 34.9563" dur="15s" repeatCount="indefinite"/> </linearGradient>
沿线旋转案例
沿线运动，物体的中心点要在0 0 点上，否则会叠加路径和中心点的坐标值， 会跑去其他地方旋转
<path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M32.375 8.9563C46.7342 8.9563 58.375 20.5967 58.375 34.9563C58.375 49.3155 46.7342 60.9563 32.375 60.9563C18.0154 60.9563 6.375 49.3155 6.375 34.9563C6.375 20.5967 18.0154 8.9563 32.375 8.9563Z" stroke="url(#paint3_linear_348_227)" stroke-width="0.5"/> <rect x="-4" y="-4" width="8" height="8" fill="url(#pattern0)"> <animateMotion dur="6s" repeatCount="indefinite" keyPoints="0; 0.2; 0.4; 0.6; 0.8; 1" keyTimes="0; 0.3; 0.6; 0.75; 0.85; 1"> <mpath xlink:href="#a"></mpath> </animateMotion> </rect>
注意：
使用 <mpath xlink:href="#a"></mpath> svg 标签需要加 xmlns:xlink="http://www.w3.org/1999/xlink" 否则会报错
旋转变换，这里不用沿线运动，是因为运动的白点不是规则的图形，比较长，如果沿线运动还要做响应位置的角度旋转，比较难以实现，这里就直接调整白点绕一个点旋转，并调整它的y轴压缩比例，让他的旋转变成一个椭圆
<path d="M43.9712 71.3301C54.9787 71.3301 64.9235 72.8 72.0993 75.1629C75.6898 76.3453 78.5593 77.7423 80.5209 79.2694C82.4887 80.8015 83.4714 82.405 83.4714 84.0022C83.4714 85.5993 82.4887 87.2027 80.5209 88.7348C78.5593 90.2619 75.6898 91.6589 72.0993 92.8412C64.9235 95.2042 54.9787 96.6741 43.9712 96.6741C32.964 96.6741 23.0193 95.2042 15.8436 92.8412C12.253 91.6589 9.38351 90.2619 7.422 88.7348C5.45416 87.2027 4.47144 85.5993 4.47144 84.0022C4.47144 82.405 5.45417 80.8015 7.42201 79.2694C9.38351 77.7423 12.253 76.3453 15.8436 75.1629C23.0193 72.8 32.964 71.3301 43.9712 71.3301Z" stroke="url(#paint6_linear_339_220)"/> <g xmlns="http://www.w3.org/2000/svg" transform=" matrix(0.3, 0.15, -0.5,0.1, 44.0206, 83.2037)"> <path d="M 0,70 A 68,70 0 0,0 68,0 2,2 0 0,1 72,0 72,70 0 0,1 0,70Z" fill="url(#lcx_111)"> <animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="3s" repeatCount="indefinite"/> </path> </g>
参考文档：
svg动画指南：
https://zhuanlan.zhihu.com/p/596435952
