我正在嘗試組合和影片 15 個 SVG（顏色漸變和輕微的斑點變化）。我已經嘗試了我在 CSS 中所知道的一切，以及 svgasm 和 snap.svg 庫。
SVG 是在 Figma 中制作的，并且嘗試過使用 @keyframes/basic CSS，但 SVG 分散在整個視口中
誰能幫我解決這個問題？
謝謝
<svg width="50%" height="50%" viewBox="0 0 2758 2440" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="frame1" filter="url(#filter0_f_54_9)">
<path
d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1700.28 469.482 1743.74 496.34 1745.04 504.601C1815.77 521.541 2034.24 764.662 2162.27 1042.56C2304.15 1350.51 2755.05 1925.03 2193 2124Z"
fill="url(#paint0_linear_54_9)" />
<path
d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1700.28 469.482 1743.74 496.34 1745.04 504.601C1815.77 521.541 2034.24 764.662 2162.27 1042.56C2304.15 1350.51 2755.05 1925.03 2193 2124Z"
fill="url(#paint1_linear_54_9)" fill-opacity="0.32" />
</g>
<defs>
<filter id="filter0_f_54_9" x="0.554688" y="0.743164" width="2757.32" height="2438.5"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_54_9" />
</filter>
<linearGradient id="paint0_linear_54_9" x1="661.172" y1="668.504" x2="-590.5" y2="1723"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FCA38E" />
<stop offset="0.0386523" stop-color="#FFAB98" />
<stop offset="0.0738017" stop-color="#FCB19F" />
<stop offset="0.123069" stop-color="#FBA793" />
<stop offset="0.167669" stop-color="#FBC4B7" />
<stop offset="0.213138" stop-color="#DBB8C7" />
<stop offset="0.257679" stop-color="#DBB8C7" />
<stop offset="0.304105" stop-color="#DBB8C7" />
<stop offset="0.373275" stop-color="#A9ADDA" />
<stop offset="0.377431" stop-color="#6E8DFB" />
<stop offset="0.380977" stop-color="#C4B1D0" />
<stop offset="0.382591" stop-color="#A9ADDA" />
<stop offset="0.4446" stop-color="#698FFB" />
<stop offset="0.483419" stop-color="#86ACE5" />
<stop offset="0.483519" stop-color="#8AB0E2" />
<stop offset="0.578662" stop-color="#6993F9" />
<stop offset="0.621066" stop-color="#6A8EFB" />
<stop offset="0.664049" stop-color="#6A91FA" />
<stop offset="0.707934" stop-color="#4FBDF1" />
<stop offset="0.74911" stop-color="#72C8DE" />
<stop offset="0.793838" stop-color="#76D6D6" />
<stop offset="0.83966" stop-color="#77DDD3" />
<stop offset="0.861422" stop-color="#77DCD3" />
<stop offset="0.865799" stop-color="#77DCD3" />
</linearGradient>
<linearGradient id="paint1_linear_54_9" x1="504.172" y1="584.622" x2="1975.31" y2="1778.8"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FB0909" />
<stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
<svg width="60%" height="60%" viewBox="0 0 2785 2440" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="frame2" filter="url(#filter0_f_70_4)">
<path
d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1730.87 481.618 1752.98 503.044 1743.26 507.158C1821.47 539.785 2113.37 925.226 2243.5 1207.68C2385.37 1515.63 2755.05 1925.03 2193 2124Z"
fill="url(#paint0_linear_70_4)" />
<path
d="M2193 2124C2159.68 2221.54 1736.21 1999.99 1661.5 2071C1586.79 2142.01 1296.6 2042.67 1197.5 2071C1098.4 2099.33 1057.82 2048.02 956.864 2027.23C855.912 2006.45 716.841 1817 636.998 1751.82C557.156 1686.64 338.547 1548.57 297.975 1453.82C257.402 1359.07 396.071 1310.45 403.998 1207.68C411.925 1104.92 444.593 1005.59 499.215 918.186C553.838 830.779 452.456 622.399 528.406 556.385L747.006 387.055L1018.31 330.683C1083.75 287.516 1144.5 249 1492.5 387.055C1730.87 481.618 1752.98 503.044 1743.26 507.158C1821.47 539.785 2113.37 925.226 2243.5 1207.68C2385.37 1515.63 2755.05 1925.03 2193 2124Z"
fill="url(#paint1_linear_70_4)" fill-opacity="0.32" />
</g>
<defs>
<filter id="filter0_f_70_4" x="0.554688" y="0.743164" width="2783.89" height="2438.5"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_4" />
</filter>
<linearGradient id="paint0_linear_70_4" x1="661.172" y1="668.504" x2="-274" y2="1703.5"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FCA38E" />
<stop offset="0.0386523" stop-color="#FFAB98" />
<stop offset="0.0738017" stop-color="#FCB19F" />
<stop offset="0.123069" stop-color="#FBA793" />
<stop offset="0.167669" stop-color="#FBC4B7" />
<stop offset="0.213138" stop-color="#DBB8C7" />
<stop offset="0.257679" stop-color="#DBB8C7" />
<stop offset="0.304105" stop-color="#DBB8C7" />
<stop offset="0.373275" stop-color="#A9ADDA" />
<stop offset="0.377431" stop-color="#6E8DFB" />
<stop offset="0.380977" stop-color="#C4B1D0" />
<stop offset="0.382591" stop-color="#A9ADDA" />
<stop offset="0.4446" stop-color="#698FFB" />
<stop offset="0.483419" stop-color="#86ACE5" />
<stop offset="0.483519" stop-color="#8AB0E2" />
<stop offset="0.578662" stop-color="#6993F9" />
<stop offset="0.621066" stop-color="#6A8EFB" />
<stop offset="0.664049" stop-color="#6A91FA" />
<stop offset="0.707934" stop-color="#4FBDF1" />
<stop offset="0.74911" stop-color="#72C8DE" />
<stop offset="0.793838" stop-color="#76D6D6" />
<stop offset="0.83966" stop-color="#77DDD3" />
<stop offset="0.861422" stop-color="#77DCD3" />
<stop offset="0.865799" stop-color="#77DCD3" />
<stop offset="1" stop-color="#77DCD3" />
</linearGradient>
<linearGradient id="paint1_linear_70_4" x1="504.172" y1="584.622" x2="1975.31" y2="1778.8"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FB0909" />
<stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
<svg width="60%" height="60%" viewBox="0 0 2561 2250" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="frame3" filter="url(#filter0_f_70_6)">
<path
d="M1999.54 1936.8C1969.6 2024.41 1589.21 1825.4 1522.1 1889.19C1454.99 1952.98 1194.31 1863.74 1105.29 1889.19C1016.27 1914.64 979.816 1868.55 889.132 1849.88C798.447 1831.2 673.521 1661.03 601.8 1602.47C530.078 1543.92 333.704 1419.9 297.259 1334.79C260.813 1249.68 385.378 1205.99 392.498 1113.68C399.619 1021.37 428.964 932.148 478.031 853.631C527.098 775.114 436.027 587.928 504.253 528.629L700.618 376.522L944.328 325.884C1003.11 287.107 1057.68 252.508 1370.29 376.522C1584.41 461.467 1604.27 480.713 1595.54 484.409C1665.8 513.717 1928.01 859.955 2044.9 1113.68C2172.34 1390.31 2504.42 1758.07 1999.54 1936.8Z"
fill="url(#paint0_linear_70_6)" />
<path
d="M1999.54 1936.8C1969.6 2024.41 1589.21 1825.4 1522.1 1889.19C1454.99 1952.98 1194.31 1863.74 1105.29 1889.19C1016.27 1914.64 979.816 1868.55 889.132 1849.88C798.447 1831.2 673.521 1661.03 601.8 1602.47C530.078 1543.92 333.704 1419.9 297.259 1334.79C260.813 1249.68 385.378 1205.99 392.498 1113.68C399.619 1021.37 428.964 932.148 478.031 853.631C527.098 775.114 436.027 587.928 504.253 528.629L700.618 376.522L944.328 325.884C1003.11 287.107 1057.68 252.508 1370.29 376.522C1584.41 461.467 1604.27 480.713 1595.54 484.409C1665.8 513.717 1928.01 859.955 2044.9 1113.68C2172.34 1390.31 2504.42 1758.07 1999.54 1936.8Z"
fill="url(#paint1_linear_70_6)" fill-opacity="0.32" />
</g>
<defs>
<filter id="filter0_f_70_6" x="0.59375" y="0.00585938" width="2559.73" height="2249.47"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_6" />
</filter>
<linearGradient id="paint0_linear_70_6" x1="623.515" y1="629.344" x2="143" y2="1774"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FCA38E" />
<stop offset="0.0386523" stop-color="#FFAB98" />
<stop offset="0.0738017" stop-color="#FCB19F" />
<stop offset="0.123069" stop-color="#FBA793" />
<stop offset="0.167669" stop-color="#FBC4B7" />
<stop offset="0.213138" stop-color="#DBB8C7" />
<stop offset="0.257679" stop-color="#DBB8C7" />
<stop offset="0.304105" stop-color="#DBB8C7" />
<stop offset="0.373275" stop-color="#A9ADDA" />
<stop offset="0.377431" stop-color="#6E8DFB" />
<stop offset="0.380977" stop-color="#C4B1D0" />
<stop offset="0.382591" stop-color="#A9ADDA" />
<stop offset="0.4446" stop-color="#698FFB" />
<stop offset="0.483419" stop-color="#86ACE5" />
<stop offset="0.483519" stop-color="#8AB0E2" />
<stop offset="0.578662" stop-color="#6993F9" />
<stop offset="0.621066" stop-color="#6A8EFB" />
<stop offset="0.664049" stop-color="#6A91FA" />
<stop offset="0.707934" stop-color="#4FBDF1" />
<stop offset="0.74911" stop-color="#72C8DE" />
<stop offset="0.793838" stop-color="#76D6D6" />
<stop offset="0.83966" stop-color="#77DDD3" />
<stop offset="0.861422" stop-color="#77DCD3" />
<stop offset="0.865799" stop-color="#77DCD3" />
<stop offset="1" stop-color="#77DCD3" />
</linearGradient>
<linearGradient id="paint1_linear_70_6" x1="482.483" y1="553.994" x2="1803.99" y2="1626.71"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FB0909" />
<stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
<svg width="60%" height="60%" viewBox="0 0 2492 2192" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="frame4" filter="url(#filter0_f_70_8)">
<path
d="M1940.59 1880.11C1911.7 1964.68 1544.5 1772.58 1479.72 1834.15C1414.94 1895.72 1163.32 1809.58 1077.38 1834.15C991.454 1858.72 956.264 1814.23 868.727 1796.2C781.19 1778.18 660.601 1613.91 591.369 1557.39C522.136 1500.87 332.579 1381.15 297.398 1298.99C262.218 1216.84 382.459 1174.67 389.332 1085.56C396.205 996.452 424.532 910.328 471.896 834.537C519.259 758.745 431.35 578.056 497.207 520.816L686.757 373.988L922.008 325.108C978.753 287.677 1031.43 254.279 1333.18 373.988C1539.87 455.984 1559.05 474.563 1550.62 478.131C1618.44 506.422 1871.54 840.641 1984.38 1085.56C2107.4 1352.59 2427.95 1707.58 1940.59 1880.11Z"
fill="url(#paint0_linear_70_8)" />
<path
d="M1940.59 1880.11C1911.7 1964.68 1544.5 1772.58 1479.72 1834.15C1414.94 1895.72 1163.32 1809.58 1077.38 1834.15C991.454 1858.72 956.264 1814.23 868.727 1796.2C781.19 1778.18 660.601 1613.91 591.369 1557.39C522.136 1500.87 332.579 1381.15 297.398 1298.99C262.218 1216.84 382.459 1174.67 389.332 1085.56C396.205 996.452 424.532 910.328 471.896 834.537C519.259 758.745 431.35 578.056 497.207 520.816L686.757 373.988L922.008 325.108C978.753 287.677 1031.43 254.279 1333.18 373.988C1539.87 455.984 1559.05 474.563 1550.62 478.131C1618.44 506.422 1871.54 840.641 1984.38 1085.56C2107.4 1352.59 2427.95 1707.58 1940.59 1880.11Z"
fill="url(#paint1_linear_70_8)" fill-opacity="0.32" />
</g>
<defs>
<filter id="filter0_f_70_8" x="0.963867" y="0.475098" width="2491.02" height="2191.52"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_8" />
</filter>
<linearGradient id="paint0_linear_70_8" x1="612.33" y1="618.035" x2="148.494" y2="1722.96"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FCA38E" />
<stop offset="0.0386523" stop-color="#FFAB98" />
<stop offset="0.0738017" stop-color="#FCB19F" />
<stop offset="0.123069" stop-color="#FBA793" />
<stop offset="0.167669" stop-color="#FBC4B7" />
<stop offset="0.213138" stop-color="#DBB8C7" />
<stop offset="0.257679" stop-color="#DBB8C7" />
<stop offset="0.304105" stop-color="#DBB8C7" />
<stop offset="0.373275" stop-color="#A9ADDA" />
<stop offset="0.377431" stop-color="#6E8DFB" />
<stop offset="0.380977" stop-color="#C4B1D0" />
<stop offset="0.382591" stop-color="#A9ADDA" />
<stop offset="0.4446" stop-color="#698FFB" />
<stop offset="0.483419" stop-color="#86ACE5" />
<stop offset="0.483519" stop-color="#8AB0E2" />
<stop offset="0.578662" stop-color="#6993F9" />
<stop offset="0.621066" stop-color="#6A8EFB" />
<stop offset="0.664049" stop-color="#6A91FA" />
<stop offset="0.707934" stop-color="#4FBDF1" />
<stop offset="0.74911" stop-color="#72C8DE" />
<stop offset="0.793838" stop-color="#76D6D6" />
<stop offset="0.83966" stop-color="#77DDD3" />
<stop offset="0.861422" stop-color="#77DCD3" />
<stop offset="0.865799" stop-color="#77DCD3" />
<stop offset="1" stop-color="#77DCD3" />
</linearGradient>
<linearGradient id="paint1_linear_70_8" x1="476.194" y1="545.3" x2="1751.83" y2="1580.78"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FB0909" />
<stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
<svg width="60%" height="60%" viewBox="0 0 2382 2099" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="frame5" filter="url(#filter0_f_70_10)">
<path
d="M1845.42 1788.09C1818.19 1867.79 1472.19 1686.77 1411.14 1744.79C1350.1 1802.81 1112.99 1721.64 1032.02 1744.79C951.049 1767.94 917.89 1726.02 835.404 1709.03C752.918 1692.04 639.286 1537.25 574.049 1483.99C508.811 1430.73 330.191 1317.93 297.041 1240.51C263.89 1163.09 377.193 1123.36 383.67 1039.39C390.147 955.426 416.839 874.271 461.47 802.853C506.1 731.435 423.263 561.172 485.321 507.234L663.933 368.878L885.61 322.818C939.081 287.547 988.716 256.077 1273.06 368.878C1467.82 446.143 1485.89 463.65 1477.95 467.012C1541.85 493.67 1780.36 808.605 1886.68 1039.39C2002.6 1291.01 2304.66 1625.52 1845.42 1788.09Z"
fill="url(#paint0_linear_70_10)" />
<path
d="M1845.42 1788.09C1818.19 1867.79 1472.19 1686.77 1411.14 1744.79C1350.1 1802.81 1112.99 1721.64 1032.02 1744.79C951.049 1767.94 917.89 1726.02 835.404 1709.03C752.918 1692.04 639.286 1537.25 574.049 1483.99C508.811 1430.73 330.191 1317.93 297.041 1240.51C263.89 1163.09 377.193 1123.36 383.67 1039.39C390.147 955.426 416.839 874.271 461.47 802.853C506.1 731.435 423.263 561.172 485.321 507.234L663.933 368.878L885.61 322.818C939.081 287.547 988.716 256.077 1273.06 368.878C1467.82 446.143 1485.89 463.65 1477.95 467.012C1541.85 493.67 1780.36 808.605 1886.68 1039.39C2002.6 1291.01 2304.66 1625.52 1845.42 1788.09Z"
fill="url(#paint1_linear_70_10)" fill-opacity="0.32" />
</g>
<defs>
<filter id="filter0_f_70_10" x="0.978516" y="0.184082" width="2380.75" height="2098.54"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="145" result="effect1_foregroundBlur_70_10" />
</filter>
<linearGradient id="paint0_linear_70_10" x1="593.801" y1="598.843" x2="156.728" y2="1640.01"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FCA38E" />
<stop offset="0.0386523" stop-color="#FFAB98" />
<stop offset="0.0738017" stop-color="#FCB19F" />
<stop offset="0.123069" stop-color="#FBA793" />
<stop offset="0.167669" stop-color="#FBC4B7" />
<stop offset="0.213138" stop-color="#DBB8C7" />
<stop offset="0.257679" stop-color="#DBB8C7" />
<stop offset="0.304105" stop-color="#DBB8C7" />
<stop offset="0.373275" stop-color="#A9ADDA" />
<stop offset="0.377431" stop-color="#6E8DFB" />
<stop offset="0.380977" stop-color="#C4B1D0" />
<stop offset="0.382591" stop-color="#A9ADDA" />
<stop offset="0.4446" stop-color="#698FFB" />
<stop offset="0.483419" stop-color="#86ACE5" />
<stop offset="0.483519" stop-color="#8AB0E2" />
<stop offset="0.578662" stop-color="#6993F9" />
<stop offset="0.621066" stop-color="#6A8EFB" />
<stop offset="0.664049" stop-color="#6A91FA" />
<stop offset="0.707934" stop-color="#4FBDF1" />
<stop offset="0.74911" stop-color="#72C8DE" />
<stop offset="0.793838" stop-color="#76D6D6" />
<stop offset="0.83966" stop-color="#77DDD3" />
<stop offset="0.861422" stop-color="#77DCD3" />
<stop offset="0.865799" stop-color="#77DCD3" />
<stop offset="1" stop-color="#77DCD3" />
</linearGradient>
<linearGradient id="paint1_linear_70_10" x1="465.52" y1="530.306" x2="1667.55" y2="1506.04"
gradientUnits="userSpaceOnUse">
<stop stop-color="#FB0909" />
<stop offset="1" stop-color="#41DE0A" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
uj5u.com熱心網友回復：
使用 Snap，我們可以使用 css 選擇器選擇和操作現有元素，例如
var element = Snap('<some css selector>');
因此，我們可以執行以下操作，如果我們想要按順序播放影片，則使用 animate 回呼，或者同時運行多個影片。
var s = Snap("#svg");
animateFrame1();
function animateFrame1 () {
var g = Snap("#frame1").animate({ 'transform': 'r180'}, 1000, mina.linear, animateFrame2)
}
function animateFrame2 () {
var g = Snap("#frame2").animate({ 'transform': 'r180'}, 1000, mina.linear, )
}
示例jsfiddle
如果您需要大量組合，這里還有一個 Snap 插件可以提供一些幫助（查看 el.animateFrames 方法）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/516155.html