CSS / SVG /动画：将转换原点应用于svg中的单个元素不起作用

Question

我想使用animejs为svg的特定部分（多边形）设置动画。

例如，我希望每个单独的多边形围绕其中心旋转或从0.1缩放为1.0。

我的问题是，多边形不围绕自己的中心旋转，而是围绕整个svg的左上角旋转。

我研究了有关“在SVG元素上进行转换”的这篇文章，并发现“转换起源”与我的问题有关。 但是，即使我设置了transform-origin: 50% 50% ，每个多边形的动画的原点也是整个svg的中心，而不是单个svg多边形的中心。

 anime({ targets: 'polygon, polyline', scale: [0.1, 1], opacity: [0.1, 1], rotate: '1turn', duration: 7000 }); 

 body, html{ margin:0 } svg, g { transform-origin: unset unset; } polygon, polyline { transform-origin: 50% 50%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> <svg version="1.1" id="heroSvg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1300" style="enable-background:new 0 0 1920 1300;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} .st1{fill:url(#SVGID_2_);} .st2{fill:url(#SVGID_3_);} .st3{fill:url(#SVGID_4_);} .st4{fill:url(#SVGID_5_);} .st5{fill:url(#SVGID_6_);} .st6{fill:url(#SVGID_7_);} .st7{fill:url(#SVGID_8_);} .st8{fill:url(#SVGID_9_);} .st9{fill:url(#SVGID_10_);} .st10{fill:url(#SVGID_11_);} .st11{fill:url(#SVGID_12_);} .st12{fill:url(#SVGID_13_);} .st13{fill:url(#SVGID_14_);} .st14{fill:url(#SVGID_15_);} .st15{fill:url(#SVGID_16_);} .st16{fill:url(#SVGID_17_);} .st17{fill:url(#SVGID_18_);} .st18{fill:url(#SVGID_19_);} .st19{fill:url(#SVGID_20_);} .st20{fill:url(#SVGID_21_);} .st21{fill:url(#SVGID_22_);} .st22{fill:url(#SVGID_23_);} .st23{fill:url(#SVGID_24_);} .st24{fill:url(#SVGID_25_);} .st25{fill:url(#SVGID_26_);} .st26{fill:url(#SVGID_27_);} .st27{fill:url(#SVGID_28_);} .st28{fill:url(#SVGID_29_);} .st29{fill:url(#SVGID_30_);} .st30{fill:url(#SVGID_31_);} .st31{fill:url(#SVGID_32_);} .st32{fill:url(#SVGID_33_);} .st33{fill:url(#SVGID_34_);} .st34{fill:url(#SVGID_35_);} .st35{fill:url(#SVGID_36_);} .st36{fill:url(#SVGID_37_);} .st37{fill:url(#SVGID_38_);} .st38{fill:url(#SVGID_39_);} .st39{fill:url(#SVGID_40_);} .st40{fill:url(#SVGID_41_);} .st41{fill:url(#SVGID_42_);} .st42{fill:url(#SVGID_43_);} .st43{fill:url(#SVGID_44_);} .st44{fill:url(#SVGID_45_);} .st45{fill:url(#SVGID_46_);} .st46{fill:url(#SVGID_47_);} .st47{fill:url(#SVGID_48_);} .st48{fill:url(#SVGID_49_);} .st49{fill:url(#SVGID_50_);} .st50{fill:url(#SVGID_51_);} .st51{fill:url(#SVGID_52_);} .st52{fill:url(#SVGID_53_);} .st53{fill:url(#SVGID_54_);} .st54{fill:url(#SVGID_55_);} .st55{fill:url(#SVGID_56_);} .st56{fill:url(#SVGID_57_);} .st57{fill:url(#SVGID_58_);} .st58{fill:url(#SVGID_59_);} .st59{fill:url(#SVGID_60_);} .st60{fill:url(#SVGID_61_);} .st61{fill:url(#SVGID_62_);} .st62{fill:url(#SVGID_63_);} .st63{fill:url(#SVGID_64_);} .st64{fill:url(#SVGID_65_);} .st65{fill:url(#SVGID_66_);} .st66{fill:url(#SVGID_67_);} .st67{fill:url(#SVGID_68_);} .st68{fill:url(#SVGID_69_);} .st69{fill:url(#SVGID_70_);} .st70{fill:url(#SVGID_71_);} .st71{fill:url(#SVGID_72_);} .st72{fill:url(#SVGID_73_);} .st73{fill:url(#SVGID_74_);} .st74{fill:url(#SVGID_75_);} .st75{fill:url(#SVGID_76_);} .st76{fill:url(#SVGID_77_);} .st77{fill:url(#SVGID_78_);} .st78{fill:url(#SVGID_79_);} .st79{fill:url(#SVGID_80_);} .st80{fill:url(#SVGID_81_);} .st81{fill:url(#SVGID_82_);} .st82{fill:url(#SVGID_83_);} .st83{fill:url(#SVGID_84_);} .st84{fill:url(#SVGID_85_);} .st85{fill:url(#SVGID_86_);} .st86{fill:url(#SVGID_87_);} .st87{fill:url(#SVGID_88_);} .st88{fill:url(#SVGID_89_);} .st89{fill:url(#SVGID_90_);} .st90{fill:url(#SVGID_91_);} .st91{fill:url(#SVGID_92_);} .st92{fill:url(#SVGID_93_);} .st93{fill:url(#SVGID_94_);} .st94{fill:url(#SVGID_95_);} .st95{fill:url(#SVGID_96_);} .st96{fill:url(#SVGID_97_);} .st97{fill:url(#SVGID_98_);} .st98{fill:url(#SVGID_99_);} .st99{fill:url(#SVGID_100_);} .st100{fill:url(#SVGID_101_);} .st101{fill:url(#SVGID_102_);} .st102{fill:url(#SVGID_103_);} .st103{fill:url(#SVGID_104_);} .st104{fill:url(#SVGID_105_);} .st105{fill:url(#SVGID_106_);} .st106{fill:url(#SVGID_107_);} .st107{fill:url(#SVGID_108_);} .st108{fill:url(#SVGID_109_);} .st109{fill:url(#SVGID_110_);} .st110{fill:url(#SVGID_111_);} .st111{fill:url(#SVGID_112_);} .st112{fill:url(#SVGID_113_);} .st113{fill:url(#SVGID_114_);} .st114{fill:url(#SVGID_115_);} .st115{fill:url(#SVGID_116_);} .st116{fill:url(#SVGID_117_);} .st117{fill:url(#SVGID_118_);} .st118{fill:url(#SVGID_119_);} .st119{fill:url(#SVGID_120_);} .st120{fill:url(#SVGID_121_);} .st121{fill:url(#SVGID_122_);} .st122{fill:url(#SVGID_123_);} .st123{fill:url(#SVGID_124_);} .st124{fill:url(#SVGID_125_);} .st125{fill:url(#SVGID_126_);} .st126{fill:url(#SVGID_127_);} .st127{fill:url(#SVGID_128_);} .st128{fill:url(#SVGID_129_);} .st129{fill:url(#SVGID_130_);} .st130{fill:url(#SVGID_131_);} .st131{fill:url(#SVGID_132_);} .st132{fill:url(#SVGID_133_);} .st133{fill:url(#SVGID_134_);} .st134{fill:url(#SVGID_135_);} .st135{fill:url(#SVGID_136_);} .st136{fill:url(#SVGID_137_);} .st137{fill:url(#SVGID_138_);} .st138{fill:url(#SVGID_139_);} .st139{fill:url(#SVGID_140_);} .st140{fill:url(#SVGID_141_);} .st141{fill:url(#SVGID_142_);} .st142{fill:url(#SVGID_143_);} .st143{fill:url(#SVGID_144_);} .st144{fill:url(#SVGID_145_);} .st145{fill:url(#SVGID_146_);} .st146{fill:url(#SVGID_147_);} .st147{fill:url(#SVGID_148_);} .st148{fill:url(#SVGID_149_);} .st149{fill:url(#SVGID_150_);} .st150{fill:url(#SVGID_151_);} .st151{fill:url(#SVGID_152_);} .st152{fill:url(#SVGID_153_);} .st153{fill:url(#SVGID_154_);} .st154{fill:url(#SVGID_155_);} .st155{fill:url(#SVGID_156_);} .st156{fill:url(#SVGID_157_);} .st157{fill:url(#SVGID_158_);} .st158{fill:url(#SVGID_159_);} .st159{fill:url(#SVGID_160_);} .st160{fill:url(#SVGID_161_);} .st161{fill:url(#SVGID_162_);} .st162{fill:url(#SVGID_163_);} .st163{fill:url(#SVGID_164_);} .st164{fill:url(#SVGID_165_);} .st165{fill:url(#SVGID_166_);} .st166{fill:url(#SVGID_167_);} .st167{fill:url(#SVGID_168_);} .st168{fill:url(#SVGID_169_);} .st169{fill:url(#SVGID_170_);} .st170{fill:url(#SVGID_171_);} .st171{fill:url(#SVGID_172_);} .st172{fill:url(#SVGID_173_);} .st173{fill:url(#SVGID_174_);} .st174{fill:url(#SVGID_175_);} .st175{fill:url(#SVGID_176_);} .st176{fill:url(#SVGID_177_);} .st177{fill:url(#SVGID_178_);} .st178{fill:url(#SVGID_179_);} .st179{fill:url(#SVGID_180_);} .st180{fill:url(#SVGID_181_);} .st181{fill:url(#SVGID_182_);} .st182{fill:url(#SVGID_183_);} .st183{fill:url(#SVGID_184_);} .st184{fill:url(#SVGID_185_);} .st185{fill:url(#SVGID_186_);} .st186{fill:url(#SVGID_187_);} .st187{fill:url(#SVGID_188_);} .st188{fill:url(#SVGID_189_);} .st189{fill:url(#SVGID_190_);} .st190{fill:url(#SVGID_191_);} .st191{fill:url(#SVGID_192_);} .st192{fill:url(#SVGID_193_);} .st193{fill:url(#SVGID_194_);} .st194{fill:url(#SVGID_195_);} .st195{fill:url(#SVGID_196_);} .st196{fill:url(#SVGID_197_);} .st197{fill:url(#SVGID_198_);} .st198{fill:url(#SVGID_199_);} .st199{fill:url(#SVGID_200_);} .st200{fill:url(#SVGID_201_);} .st201{fill:url(#SVGID_202_);} .st202{fill:url(#SVGID_203_);} .st203{fill:url(#SVGID_204_);} .st204{fill:url(#SVGID_205_);} .st205{fill:url(#SVGID_206_);} .st206{fill:url(#SVGID_207_);} .st207{fill:url(#SVGID_208_);} .st208{fill:url(#SVGID_209_);} .st209{fill:url(#SVGID_210_);} .st210{fill:url(#SVGID_211_);} .st211{fill:url(#SVGID_212_);} .st212{fill:url(#SVGID_213_);} .st213{fill:url(#SVGID_214_);} .st214{fill:url(#SVGID_215_);} .st215{fill:url(#SVGID_216_);} .st216{fill:url(#SVGID_217_);} .st217{fill:url(#SVGID_218_);} .st218{fill:url(#SVGID_219_);} .st219{fill:url(#SVGID_220_);} .st220{fill:url(#SVGID_221_);} .st221{fill:url(#SVGID_222_);} .st222{fill:url(#SVGID_223_);} .st223{fill:url(#SVGID_224_);} .st224{fill:url(#SVGID_225_);} .st225{fill:url(#SVGID_226_);} .st226{fill:url(#SVGID_227_);} .st227{fill:url(#SVGID_228_);} .st228{fill:url(#SVGID_229_);} .st229{fill:url(#SVGID_230_);} .st230{fill:url(#SVGID_231_);} .st231{fill:url(#SVGID_232_);} .st232{fill:url(#SVGID_233_);} .st233{fill:url(#SVGID_234_);} .st234{fill:url(#SVGID_235_);} .st235{fill:url(#SVGID_236_);} .st236{fill:url(#SVGID_237_);} .st237{display:none;opacity:0.36;fill:url(#SVGID_238_);} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-14699.4551" y1="15939.2051" x2="-7756.4546" y2="8913.5049" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A3246E"/> <stop offset="1" style="stop-color:#9E2350"/> </linearGradient> <polygon class="st0" points="564.7,284.7 367.9,170.4 490.5,369.6 "/> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-13639.6572" y1="16689.8086" x2="-5237.6577" y2="13221.6074" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B33649"/> <stop offset="1" style="stop-color:#AA2342"/> </linearGradient> <polygon class="st1" points="644.9,177.5 367.9,170.4 564.7,284.7 "/> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-8122.2817" y1="15235.3623" x2="-3133.2817" y2="11452.0625" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C13F4D"/> <stop offset="1" style="stop-color:#CA3A46"/> </linearGradient> <polygon class="st2" points="706.2,210.5 644.9,177.5 564.7,284.7 "/> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-6970.895" y1="14968.877" x2="-1223.8953" y2="8463.1768" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C65059"/> <stop offset="1" style="stop-color:#D15962"/> </linearGradient> <polygon class="st3" points="734.5,402.6 706.2,210.5 564.7,284.7 "/> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-5094.6514" y1="16566.1113" x2="-2932.6514" y2="14362.7119" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C62D46"/> <stop offset="1" style="stop-color:#C62D48"/> </linearGradient> <polygon class="st4" points="706.2,210.5 664.9,148 644.9,177.5 "/> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="17507.7129" y1="-4080.5278" x2="26151.7129" y2="-7896.5278" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CF62D1"/> <stop offset="1" style="stop-color:#BF4BAF"/> </linearGradient> <polygon class="st5" points="1255.4,804.5 1519.3,882.2 1527.6,762 "/> <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="17485.4785" y1="-6247.9624" x2="25680.4785" y2="-11552.9619" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CF6BDB"/> <stop offset="1" style="stop-color:#C864C8"/> </linearGradient> <polygon class="st6" points="1453.4,975.3 1519.3,882.2 1255.4,804.5 "/> <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="23660.0703" y1="-9167.4619" x2="25988.0703" y2="-13158.4619" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C36BC6"/> <stop offset="1" style="stop-color:#C364C3"/> </linearGradient> <polygon class="st7" points="1453.4,975.3 1488.7,995.4 1519.3,882.2 "/> <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-10094.6826" y1="11673.9619" x2="-5734.6831" y2="5438.9614" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B3368E"/> <stop offset="1" style="stop-color:#C14B8C"/> </linearGradient> <polygon class="st8" points="564.7,284.7 490.5,369.6 624.9,476.8 "/> <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="-8158.1108" y1="11301.4336" x2="-2411.1108" y2="4795.4331" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C14972"/> <stop offset="1" style="stop-color:#D1629A"/> </linearGradient> <polygon class="st9" points="734.5,402.6 564.7,284.7 624.9,476.8 "/> <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-16312.25" y1="149.4167" x2="-10034.25" y2="-6128.583" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#740E8C"/> <stop offset="1" style="stop-color:#831A9E"/> </linearGradient> <polygon class="st10" points="377.4,581.7 358.5,736.1 536.5,759.7 "/> <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="-15386.876" y1="7738.0195" x2="-6655.8765" y2="254.0198" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B1348E"/> <stop offset="1" style="stop-color:#A83895"/> </linearGradient> <polygon class="st11" points="490.5,369.6 377.4,581.7 624.9,476.8 "/> <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="4292.6904" y1="846.5754" x2="7867.6899" y2="-3269.4243" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#D862BA"/> <stop offset="1" style="stop-color:#E670B6"/> </linearGradient> <polygon class="st12" points="1006.7,594.7 910.1,711.4 1011.4,617.1 "/> <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="16024.8516" y1="-3447.8586" x2="25628.8516" y2="-7647.8589" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CD62C8"/> <stop offset="1" style="stop-color:#C14F9C"/> </linearGradient> <polygon class="st13" points="1316.6,685.4 1255.4,804.5 1527.6,762 "/> <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="19289.166" y1="1695.8986" x2="28519.1641" y2="-4041.1011" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AF3880"/> <stop offset="1" style="stop-color:#AF3D7E"/> </linearGradient> <polygon class="st14" points="1527.6,762 1578.3,599.4 1316.6,685.4 "/> <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="-26340.3047" y1="21975.1309" x2="-25247.2051" y2="18182.5703" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#5D053B"/> <stop offset="1" style="stop-color:#540334"/> </linearGradient> <polygon class="st15" points="62.7,103.2 75.5,0 55.5,0 29.7,78.5 "/> <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="-13181.1738" y1="2261.2271" x2="-4126.1743" y2="-3388.7725" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#85168C"/> <stop offset="1" style="stop-color:#AC42C4"/> </linearGradient> <polygon class="st16" points="377.4,581.7 536.5,759.7 662.6,584.1 "/> <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="-14218.7432" y1="4748.9004" x2="-4761.7437" y2="1191.9005" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#95288E"/> <stop offset="1" style="stop-color:#C65DBA"/> </linearGradient> <polygon class="st17" points="624.9,476.8 377.4,581.7 662.6,584.1 "/> <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-9543.2725" y1="292.8513" x2="-1021.2733" y2="-5902.1484" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AC49DD"/> <stop offset="1" style="stop-color:#C162D1"/> </linearGradient> <polygon class="st18" points="536.5,759.7 778.1,694.9 662.6,584.1 "/> <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="25756.1797" y1="-7026.1777" x2="33474.1797" y2="-10833.1777" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B850B3"/> <stop offset="1" style="stop-color:#AF4DAA"/> </linearGradient> <polygon class="st19" points="1519.3,882.2 1779.8,890.5 1527.6,762 "/> <linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="34433.8711" y1="22258.1602" x2="40236.8711" y2="19932.9199" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#4F033F"/> <stop offset="1" style="stop-color:#5D084D"/> </linearGradient> <polygon class="st20" points="1920,30.9 1920,0 1758.7,0 1845.8,73.8 "/> <linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="34139.6289" y1="18643.1387" x2="39572.6289" y2="8736.0391" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#620346"/> <stop offset="1" style="stop-color:#4B0538"/> </linearGradient> <polygon class="st21" points="1786.9,366.1 1920,239.8 1920,176.5 1845.8,73.8 "/> <linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="37629.2539" y1="21010.2949" x2="41231.2539" y2="16695.3945" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#560A49"/> <stop offset="1" style="stop-color:#640A56"/> </linearGradient> <polygon class="st22" points="1920,176.5 1920,30.9 1845.8,73.8 "/> <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="-9645.3438" y1="-5916.04" x2="-4104.3438" y2="-11050.04" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A13BDD"/> <stop offset="1" style="stop-color:#9736D1"/> </linearGradient> <polygon class="st23" points="588.3,905.8 696.8,908.2 536.5,759.7 "/> <linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="-7600.4663" y1="-1243.704" x2="921.5334" y2="-8768.7031" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A33DDD"/> <stop offset="1" style="stop-color:#A544CC"/> </linearGradient> <polygon class="st24" points="536.5,759.7 696.8,908.2 778.1,694.9 "/> <linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="-6503.6294" y1="-9643.7969" x2="-2908.6294" y2="-12300.7969" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#9533CD"/> <stop offset="1" style="stop-color:#8C28BA"/> </linearGradient> <polygon class="st25" points="588.3,905.8 654.3,985.9 696.8,908.2 "/> <linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="25705.3301" y1="164.1296" x2="33313.3281" y2="-5572.8701" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#9A247E"/> <stop offset="1" style="stop-color:#8C1672"/> </linearGradient> <polygon class="st26" points="1527.6,762 1743.3,648.9 1578.3,599.4 "/> <linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="26948.3184" y1="-165.785" x2="35845.3164" y2="-8687.7852" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A1318A"/> <stop offset="1" style="stop-color:#A13D9E"/> </linearGradient> <polygon class="st27" points="1779.8,890.5 1743.3,648.9 1527.6,762 "/> <linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="34026.6406" y1="-1312.1631" x2="38730.6406" y2="-9154.1631" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B152B5"/> <stop offset="1" style="stop-color:#9C2A8E"/> </linearGradient> <polygon class="st28" points="1779.8,890.5 1888.2,698.4 1743.3,648.9 "/> <linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="7481.1182" y1="4684.3765" x2="9726.1182" y2="735.3764" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#EB91B6"/> <stop offset="1" style="stop-color:#EFB3B6"/> </linearGradient> <polygon class="st29" points="1070.3,518.1 1044.4,482.7 1006.7,594.7 "/> <linearGradient id="SVGID_31_" gradientUnits="userSpaceOnUse" x1="7807.7271" y1="3627.4224" x2="10052.7266" y2="135.4223" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E982B3"/> <stop offset="1" style="stop-color:#EB90B5"/> </linearGradient> <polygon class="st30" points="1011.4,617.1 1070.3,518.1 1006.7,594.7 "/> <linearGradient id="SVGID_32_" gradientUnits="userSpaceOnUse" x1="7710.7119" y1="2734.3523" x2="13906.7119" y2="-1702.6478" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#EB7EB6"/> <stop offset="1" style="stop-color:#ED93BA"/> </linearGradient> <polygon class="st31" points="1202.3,654.8 1070.3,518.1 1011.4,617.1 "/> <linearGradient id="SVGID_33_" gradientUnits="userSpaceOnUse" x1="35219.4688" y1="-2674.1736" x2="39044.4688" y2="-10448.1738" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#BA5EC6"/> <stop offset="1" style="stop-color:#B650BA"/> </linearGradient> <polygon class="st32" points="1870.5,918.8 1888.2,698.4 1779.8,890.5 "/> <linearGradient id="SVGID_34_" gradientUnits="userSpaceOnUse" x1="37431.2656" y1="-5202.9653" x2="40264.2656" y2="-8534.9658" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AF3FA5"/> <stop offset="1" style="stop-color:#C860CA"/> </linearGradient> <polygon class="st33" points="1870.5,918.8 1920,900.7 1920,726.9 1888.2,698.4 "/> <linearGradient id="SVGID_35_" gradientUnits="userSpaceOnUse" x1="5181.6489" y1="81.094" x2="9072.6484" y2="-6691.9058" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#D160BD"/> <stop offset="1" style="stop-color:#D362C1"/> </linearGradient> <polygon class="st34" points="910.1,711.4 1032.6,830.4 1011.4,617.1 "/> <linearGradient id="SVGID_36_" gradientUnits="userSpaceOnUse" x1="7859.9673" y1="-87.4371" x2="14459.9678" y2="-7462.437" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E672C3"/> <stop offset="1" style="stop-color:#D86DCA"/> </linearGradient> <polygon class="st35" points="1011.4,617.1 1032.6,830.4 1202.3,654.8 "/> <linearGradient id="SVGID_37_" gradientUnits="userSpaceOnUse" x1="16199.8867" y1="-12308.8564" x2="20809.8867" y2="-14394.8564" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AF56B6"/> <stop offset="1" style="stop-color:#B160B3"/> </linearGradient> <polygon class="st36" points="1234.1,971.8 1334.3,1039 1382.6,1000.1 "/> <linearGradient id="SVGID_38_" gradientUnits="userSpaceOnUse" x1="16123.0303" y1="-6916.147" x2="23108.0293" y2="-13817.1475" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CA70D6"/> <stop offset="1" style="stop-color:#C16DC1"/> </linearGradient> <polygon class="st37" points="1255.4,804.5 1382.6,1000.1 1453.4,975.3 "/> <linearGradient id="SVGID_39_" gradientUnits="userSpaceOnUse" x1="19307" y1="-13248.333" x2="24753" y2="-14786.333" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B160B1"/> <stop offset="1" style="stop-color:#BA6BBA"/> </linearGradient> <polygon class="st38" points="1382.6,1000.1 1334.3,1039 1488.7,995.4 "/> <linearGradient id="SVGID_40_" gradientUnits="userSpaceOnUse" x1="20978.8164" y1="-12679.2861" x2="24720.8164" y2="-13552.2861" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C16DC1"/> <stop offset="1" style="stop-color:#BD6DBF"/> </linearGradient> <polygon class="st39" points="1382.6,1000.1 1488.7,995.4 1453.4,975.3 "/> <linearGradient id="SVGID_41_" gradientUnits="userSpaceOnUse" x1="14918.7852" y1="2961.0852" x2="19492.7852" y2="-2068.915" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E279AA"/> <stop offset="1" style="stop-color:#D36783"/> </linearGradient> <polygon class="st40" points="1316.6,685.4 1332,542.8 1202.3,654.8 "/> <linearGradient id="SVGID_42_" gradientUnits="userSpaceOnUse" x1="18448.7969" y1="1847.6938" x2="27308.7969" y2="-2982.3059" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CA597E"/> <stop offset="1" style="stop-color:#B63F62"/> </linearGradient> <polygon class="st41" points="1578.3,599.4 1332,542.8 1316.6,685.4 "/> <linearGradient id="SVGID_43_" gradientUnits="userSpaceOnUse" x1="10967.668" y1="4529.6211" x2="15623.668" y2="-293.3789" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#F0A5B1"/> <stop offset="1" style="stop-color:#ED90AF"/> </linearGradient> <polygon class="st42" points="1192.9,534.6 1070.3,518.1 1202.3,654.8 "/> <linearGradient id="SVGID_44_" gradientUnits="userSpaceOnUse" x1="14365.7578" y1="2964.2297" x2="19173.7578" y2="-1191.7705" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E883AC"/> <stop offset="1" style="stop-color:#E28085"/> </linearGradient> <polygon class="st43" points="1332,542.8 1192.9,534.6 1202.3,654.8 "/> <linearGradient id="SVGID_45_" gradientUnits="userSpaceOnUse" x1="35374.6914" y1="-9364.8174" x2="38447.6914" y2="-12836.8174" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C175DB"/> <stop offset="1" style="stop-color:#C67CE6"/> </linearGradient> </svg> 

Answer 1

默认情况下， transform-origin: 50% 50%表示SVG的中心。

如果希望它表示每个元素的中心，则可以使用transform-box属性指定它：

polygon, polyline {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}

这是一个相对较新的属性，可在Chrome，Firefox和Opera的最新版本上使用。 但是Edge还没有AFAIK。

 anime({ targets: 'polygon, polyline', scale: [0.1, 1], opacity: [0.1, 1], rotate: '1turn', duration: 7000 }); 

 body, html{ margin:0 } svg, g { transform-origin: unset unset; } polygon, polyline { transform-origin: 50% 50%; transform-box: fill-box; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script> <svg version="1.1" id="heroSvg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1300" style="enable-background:new 0 0 1920 1300;" xml:space="preserve"> <style type="text/css"> .st0{fill:url(#SVGID_1_);} .st1{fill:url(#SVGID_2_);} .st2{fill:url(#SVGID_3_);} .st3{fill:url(#SVGID_4_);} .st4{fill:url(#SVGID_5_);} .st5{fill:url(#SVGID_6_);} .st6{fill:url(#SVGID_7_);} .st7{fill:url(#SVGID_8_);} .st8{fill:url(#SVGID_9_);} .st9{fill:url(#SVGID_10_);} .st10{fill:url(#SVGID_11_);} .st11{fill:url(#SVGID_12_);} .st12{fill:url(#SVGID_13_);} .st13{fill:url(#SVGID_14_);} .st14{fill:url(#SVGID_15_);} .st15{fill:url(#SVGID_16_);} .st16{fill:url(#SVGID_17_);} .st17{fill:url(#SVGID_18_);} .st18{fill:url(#SVGID_19_);} .st19{fill:url(#SVGID_20_);} .st20{fill:url(#SVGID_21_);} .st21{fill:url(#SVGID_22_);} .st22{fill:url(#SVGID_23_);} .st23{fill:url(#SVGID_24_);} .st24{fill:url(#SVGID_25_);} .st25{fill:url(#SVGID_26_);} .st26{fill:url(#SVGID_27_);} .st27{fill:url(#SVGID_28_);} .st28{fill:url(#SVGID_29_);} .st29{fill:url(#SVGID_30_);} .st30{fill:url(#SVGID_31_);} .st31{fill:url(#SVGID_32_);} .st32{fill:url(#SVGID_33_);} .st33{fill:url(#SVGID_34_);} .st34{fill:url(#SVGID_35_);} .st35{fill:url(#SVGID_36_);} .st36{fill:url(#SVGID_37_);} .st37{fill:url(#SVGID_38_);} .st38{fill:url(#SVGID_39_);} .st39{fill:url(#SVGID_40_);} .st40{fill:url(#SVGID_41_);} .st41{fill:url(#SVGID_42_);} .st42{fill:url(#SVGID_43_);} .st43{fill:url(#SVGID_44_);} .st44{fill:url(#SVGID_45_);} .st45{fill:url(#SVGID_46_);} .st46{fill:url(#SVGID_47_);} .st47{fill:url(#SVGID_48_);} .st48{fill:url(#SVGID_49_);} .st49{fill:url(#SVGID_50_);} .st50{fill:url(#SVGID_51_);} .st51{fill:url(#SVGID_52_);} .st52{fill:url(#SVGID_53_);} .st53{fill:url(#SVGID_54_);} .st54{fill:url(#SVGID_55_);} .st55{fill:url(#SVGID_56_);} .st56{fill:url(#SVGID_57_);} .st57{fill:url(#SVGID_58_);} .st58{fill:url(#SVGID_59_);} .st59{fill:url(#SVGID_60_);} .st60{fill:url(#SVGID_61_);} .st61{fill:url(#SVGID_62_);} .st62{fill:url(#SVGID_63_);} .st63{fill:url(#SVGID_64_);} .st64{fill:url(#SVGID_65_);} .st65{fill:url(#SVGID_66_);} .st66{fill:url(#SVGID_67_);} .st67{fill:url(#SVGID_68_);} .st68{fill:url(#SVGID_69_);} .st69{fill:url(#SVGID_70_);} .st70{fill:url(#SVGID_71_);} .st71{fill:url(#SVGID_72_);} .st72{fill:url(#SVGID_73_);} .st73{fill:url(#SVGID_74_);} .st74{fill:url(#SVGID_75_);} .st75{fill:url(#SVGID_76_);} .st76{fill:url(#SVGID_77_);} .st77{fill:url(#SVGID_78_);} .st78{fill:url(#SVGID_79_);} .st79{fill:url(#SVGID_80_);} .st80{fill:url(#SVGID_81_);} .st81{fill:url(#SVGID_82_);} .st82{fill:url(#SVGID_83_);} .st83{fill:url(#SVGID_84_);} .st84{fill:url(#SVGID_85_);} .st85{fill:url(#SVGID_86_);} .st86{fill:url(#SVGID_87_);} .st87{fill:url(#SVGID_88_);} .st88{fill:url(#SVGID_89_);} .st89{fill:url(#SVGID_90_);} .st90{fill:url(#SVGID_91_);} .st91{fill:url(#SVGID_92_);} .st92{fill:url(#SVGID_93_);} .st93{fill:url(#SVGID_94_);} .st94{fill:url(#SVGID_95_);} .st95{fill:url(#SVGID_96_);} .st96{fill:url(#SVGID_97_);} .st97{fill:url(#SVGID_98_);} .st98{fill:url(#SVGID_99_);} .st99{fill:url(#SVGID_100_);} .st100{fill:url(#SVGID_101_);} .st101{fill:url(#SVGID_102_);} .st102{fill:url(#SVGID_103_);} .st103{fill:url(#SVGID_104_);} .st104{fill:url(#SVGID_105_);} .st105{fill:url(#SVGID_106_);} .st106{fill:url(#SVGID_107_);} .st107{fill:url(#SVGID_108_);} .st108{fill:url(#SVGID_109_);} .st109{fill:url(#SVGID_110_);} .st110{fill:url(#SVGID_111_);} .st111{fill:url(#SVGID_112_);} .st112{fill:url(#SVGID_113_);} .st113{fill:url(#SVGID_114_);} .st114{fill:url(#SVGID_115_);} .st115{fill:url(#SVGID_116_);} .st116{fill:url(#SVGID_117_);} .st117{fill:url(#SVGID_118_);} .st118{fill:url(#SVGID_119_);} .st119{fill:url(#SVGID_120_);} .st120{fill:url(#SVGID_121_);} .st121{fill:url(#SVGID_122_);} .st122{fill:url(#SVGID_123_);} .st123{fill:url(#SVGID_124_);} .st124{fill:url(#SVGID_125_);} .st125{fill:url(#SVGID_126_);} .st126{fill:url(#SVGID_127_);} .st127{fill:url(#SVGID_128_);} .st128{fill:url(#SVGID_129_);} .st129{fill:url(#SVGID_130_);} .st130{fill:url(#SVGID_131_);} .st131{fill:url(#SVGID_132_);} .st132{fill:url(#SVGID_133_);} .st133{fill:url(#SVGID_134_);} .st134{fill:url(#SVGID_135_);} .st135{fill:url(#SVGID_136_);} .st136{fill:url(#SVGID_137_);} .st137{fill:url(#SVGID_138_);} .st138{fill:url(#SVGID_139_);} .st139{fill:url(#SVGID_140_);} .st140{fill:url(#SVGID_141_);} .st141{fill:url(#SVGID_142_);} .st142{fill:url(#SVGID_143_);} .st143{fill:url(#SVGID_144_);} .st144{fill:url(#SVGID_145_);} .st145{fill:url(#SVGID_146_);} .st146{fill:url(#SVGID_147_);} .st147{fill:url(#SVGID_148_);} .st148{fill:url(#SVGID_149_);} .st149{fill:url(#SVGID_150_);} .st150{fill:url(#SVGID_151_);} .st151{fill:url(#SVGID_152_);} .st152{fill:url(#SVGID_153_);} .st153{fill:url(#SVGID_154_);} .st154{fill:url(#SVGID_155_);} .st155{fill:url(#SVGID_156_);} .st156{fill:url(#SVGID_157_);} .st157{fill:url(#SVGID_158_);} .st158{fill:url(#SVGID_159_);} .st159{fill:url(#SVGID_160_);} .st160{fill:url(#SVGID_161_);} .st161{fill:url(#SVGID_162_);} .st162{fill:url(#SVGID_163_);} .st163{fill:url(#SVGID_164_);} .st164{fill:url(#SVGID_165_);} .st165{fill:url(#SVGID_166_);} .st166{fill:url(#SVGID_167_);} .st167{fill:url(#SVGID_168_);} .st168{fill:url(#SVGID_169_);} .st169{fill:url(#SVGID_170_);} .st170{fill:url(#SVGID_171_);} .st171{fill:url(#SVGID_172_);} .st172{fill:url(#SVGID_173_);} .st173{fill:url(#SVGID_174_);} .st174{fill:url(#SVGID_175_);} .st175{fill:url(#SVGID_176_);} .st176{fill:url(#SVGID_177_);} .st177{fill:url(#SVGID_178_);} .st178{fill:url(#SVGID_179_);} .st179{fill:url(#SVGID_180_);} .st180{fill:url(#SVGID_181_);} .st181{fill:url(#SVGID_182_);} .st182{fill:url(#SVGID_183_);} .st183{fill:url(#SVGID_184_);} .st184{fill:url(#SVGID_185_);} .st185{fill:url(#SVGID_186_);} .st186{fill:url(#SVGID_187_);} .st187{fill:url(#SVGID_188_);} .st188{fill:url(#SVGID_189_);} .st189{fill:url(#SVGID_190_);} .st190{fill:url(#SVGID_191_);} .st191{fill:url(#SVGID_192_);} .st192{fill:url(#SVGID_193_);} .st193{fill:url(#SVGID_194_);} .st194{fill:url(#SVGID_195_);} .st195{fill:url(#SVGID_196_);} .st196{fill:url(#SVGID_197_);} .st197{fill:url(#SVGID_198_);} .st198{fill:url(#SVGID_199_);} .st199{fill:url(#SVGID_200_);} .st200{fill:url(#SVGID_201_);} .st201{fill:url(#SVGID_202_);} .st202{fill:url(#SVGID_203_);} .st203{fill:url(#SVGID_204_);} .st204{fill:url(#SVGID_205_);} .st205{fill:url(#SVGID_206_);} .st206{fill:url(#SVGID_207_);} .st207{fill:url(#SVGID_208_);} .st208{fill:url(#SVGID_209_);} .st209{fill:url(#SVGID_210_);} .st210{fill:url(#SVGID_211_);} .st211{fill:url(#SVGID_212_);} .st212{fill:url(#SVGID_213_);} .st213{fill:url(#SVGID_214_);} .st214{fill:url(#SVGID_215_);} .st215{fill:url(#SVGID_216_);} .st216{fill:url(#SVGID_217_);} .st217{fill:url(#SVGID_218_);} .st218{fill:url(#SVGID_219_);} .st219{fill:url(#SVGID_220_);} .st220{fill:url(#SVGID_221_);} .st221{fill:url(#SVGID_222_);} .st222{fill:url(#SVGID_223_);} .st223{fill:url(#SVGID_224_);} .st224{fill:url(#SVGID_225_);} .st225{fill:url(#SVGID_226_);} .st226{fill:url(#SVGID_227_);} .st227{fill:url(#SVGID_228_);} .st228{fill:url(#SVGID_229_);} .st229{fill:url(#SVGID_230_);} .st230{fill:url(#SVGID_231_);} .st231{fill:url(#SVGID_232_);} .st232{fill:url(#SVGID_233_);} .st233{fill:url(#SVGID_234_);} .st234{fill:url(#SVGID_235_);} .st235{fill:url(#SVGID_236_);} .st236{fill:url(#SVGID_237_);} .st237{display:none;opacity:0.36;fill:url(#SVGID_238_);} </style> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-14699.4551" y1="15939.2051" x2="-7756.4546" y2="8913.5049" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A3246E"/> <stop offset="1" style="stop-color:#9E2350"/> </linearGradient> <polygon class="st0" points="564.7,284.7 367.9,170.4 490.5,369.6 "/> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-13639.6572" y1="16689.8086" x2="-5237.6577" y2="13221.6074" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B33649"/> <stop offset="1" style="stop-color:#AA2342"/> </linearGradient> <polygon class="st1" points="644.9,177.5 367.9,170.4 564.7,284.7 "/> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-8122.2817" y1="15235.3623" x2="-3133.2817" y2="11452.0625" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C13F4D"/> <stop offset="1" style="stop-color:#CA3A46"/> </linearGradient> <polygon class="st2" points="706.2,210.5 644.9,177.5 564.7,284.7 "/> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-6970.895" y1="14968.877" x2="-1223.8953" y2="8463.1768" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C65059"/> <stop offset="1" style="stop-color:#D15962"/> </linearGradient> <polygon class="st3" points="734.5,402.6 706.2,210.5 564.7,284.7 "/> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-5094.6514" y1="16566.1113" x2="-2932.6514" y2="14362.7119" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C62D46"/> <stop offset="1" style="stop-color:#C62D48"/> </linearGradient> <polygon class="st4" points="706.2,210.5 664.9,148 644.9,177.5 "/> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="17507.7129" y1="-4080.5278" x2="26151.7129" y2="-7896.5278" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CF62D1"/> <stop offset="1" style="stop-color:#BF4BAF"/> </linearGradient> <polygon class="st5" points="1255.4,804.5 1519.3,882.2 1527.6,762 "/> <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="17485.4785" y1="-6247.9624" x2="25680.4785" y2="-11552.9619" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CF6BDB"/> <stop offset="1" style="stop-color:#C864C8"/> </linearGradient> <polygon class="st6" points="1453.4,975.3 1519.3,882.2 1255.4,804.5 "/> <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="23660.0703" y1="-9167.4619" x2="25988.0703" y2="-13158.4619" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C36BC6"/> <stop offset="1" style="stop-color:#C364C3"/> </linearGradient> <polygon class="st7" points="1453.4,975.3 1488.7,995.4 1519.3,882.2 "/> <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="-10094.6826" y1="11673.9619" x2="-5734.6831" y2="5438.9614" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B3368E"/> <stop offset="1" style="stop-color:#C14B8C"/> </linearGradient> <polygon class="st8" points="564.7,284.7 490.5,369.6 624.9,476.8 "/> <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="-8158.1108" y1="11301.4336" x2="-2411.1108" y2="4795.4331" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C14972"/> <stop offset="1" style="stop-color:#D1629A"/> </linearGradient> <polygon class="st9" points="734.5,402.6 564.7,284.7 624.9,476.8 "/> <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-16312.25" y1="149.4167" x2="-10034.25" y2="-6128.583" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#740E8C"/> <stop offset="1" style="stop-color:#831A9E"/> </linearGradient> <polygon class="st10" points="377.4,581.7 358.5,736.1 536.5,759.7 "/> <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="-15386.876" y1="7738.0195" x2="-6655.8765" y2="254.0198" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B1348E"/> <stop offset="1" style="stop-color:#A83895"/> </linearGradient> <polygon class="st11" points="490.5,369.6 377.4,581.7 624.9,476.8 "/> <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="4292.6904" y1="846.5754" x2="7867.6899" y2="-3269.4243" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#D862BA"/> <stop offset="1" style="stop-color:#E670B6"/> </linearGradient> <polygon class="st12" points="1006.7,594.7 910.1,711.4 1011.4,617.1 "/> <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="16024.8516" y1="-3447.8586" x2="25628.8516" y2="-7647.8589" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CD62C8"/> <stop offset="1" style="stop-color:#C14F9C"/> </linearGradient> <polygon class="st13" points="1316.6,685.4 1255.4,804.5 1527.6,762 "/> <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="19289.166" y1="1695.8986" x2="28519.1641" y2="-4041.1011" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AF3880"/> <stop offset="1" style="stop-color:#AF3D7E"/> </linearGradient> <polygon class="st14" points="1527.6,762 1578.3,599.4 1316.6,685.4 "/> <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="-26340.3047" y1="21975.1309" x2="-25247.2051" y2="18182.5703" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#5D053B"/> <stop offset="1" style="stop-color:#540334"/> </linearGradient> <polygon class="st15" points="62.7,103.2 75.5,0 55.5,0 29.7,78.5 "/> <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="-13181.1738" y1="2261.2271" x2="-4126.1743" y2="-3388.7725" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#85168C"/> <stop offset="1" style="stop-color:#AC42C4"/> </linearGradient> <polygon class="st16" points="377.4,581.7 536.5,759.7 662.6,584.1 "/> <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="-14218.7432" y1="4748.9004" x2="-4761.7437" y2="1191.9005" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#95288E"/> <stop offset="1" style="stop-color:#C65DBA"/> </linearGradient> <polygon class="st17" points="624.9,476.8 377.4,581.7 662.6,584.1 "/> <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="-9543.2725" y1="292.8513" x2="-1021.2733" y2="-5902.1484" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AC49DD"/> <stop offset="1" style="stop-color:#C162D1"/> </linearGradient> <polygon class="st18" points="536.5,759.7 778.1,694.9 662.6,584.1 "/> <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="25756.1797" y1="-7026.1777" x2="33474.1797" y2="-10833.1777" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B850B3"/> <stop offset="1" style="stop-color:#AF4DAA"/> </linearGradient> <polygon class="st19" points="1519.3,882.2 1779.8,890.5 1527.6,762 "/> <linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="34433.8711" y1="22258.1602" x2="40236.8711" y2="19932.9199" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#4F033F"/> <stop offset="1" style="stop-color:#5D084D"/> </linearGradient> <polygon class="st20" points="1920,30.9 1920,0 1758.7,0 1845.8,73.8 "/> <linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="34139.6289" y1="18643.1387" x2="39572.6289" y2="8736.0391" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#620346"/> <stop offset="1" style="stop-color:#4B0538"/> </linearGradient> <polygon class="st21" points="1786.9,366.1 1920,239.8 1920,176.5 1845.8,73.8 "/> <linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="37629.2539" y1="21010.2949" x2="41231.2539" y2="16695.3945" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#560A49"/> <stop offset="1" style="stop-color:#640A56"/> </linearGradient> <polygon class="st22" points="1920,176.5 1920,30.9 1845.8,73.8 "/> <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="-9645.3438" y1="-5916.04" x2="-4104.3438" y2="-11050.04" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A13BDD"/> <stop offset="1" style="stop-color:#9736D1"/> </linearGradient> <polygon class="st23" points="588.3,905.8 696.8,908.2 536.5,759.7 "/> <linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="-7600.4663" y1="-1243.704" x2="921.5334" y2="-8768.7031" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A33DDD"/> <stop offset="1" style="stop-color:#A544CC"/> </linearGradient> <polygon class="st24" points="536.5,759.7 696.8,908.2 778.1,694.9 "/> <linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="-6503.6294" y1="-9643.7969" x2="-2908.6294" y2="-12300.7969" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#9533CD"/> <stop offset="1" style="stop-color:#8C28BA"/> </linearGradient> <polygon class="st25" points="588.3,905.8 654.3,985.9 696.8,908.2 "/> <linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="25705.3301" y1="164.1296" x2="33313.3281" y2="-5572.8701" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#9A247E"/> <stop offset="1" style="stop-color:#8C1672"/> </linearGradient> <polygon class="st26" points="1527.6,762 1743.3,648.9 1578.3,599.4 "/> <linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="26948.3184" y1="-165.785" x2="35845.3164" y2="-8687.7852" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#A1318A"/> <stop offset="1" style="stop-color:#A13D9E"/> </linearGradient> <polygon class="st27" points="1779.8,890.5 1743.3,648.9 1527.6,762 "/> <linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="34026.6406" y1="-1312.1631" x2="38730.6406" y2="-9154.1631" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B152B5"/> <stop offset="1" style="stop-color:#9C2A8E"/> </linearGradient> <polygon class="st28" points="1779.8,890.5 1888.2,698.4 1743.3,648.9 "/> <linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="7481.1182" y1="4684.3765" x2="9726.1182" y2="735.3764" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#EB91B6"/> <stop offset="1" style="stop-color:#EFB3B6"/> </linearGradient> <polygon class="st29" points="1070.3,518.1 1044.4,482.7 1006.7,594.7 "/> <linearGradient id="SVGID_31_" gradientUnits="userSpaceOnUse" x1="7807.7271" y1="3627.4224" x2="10052.7266" y2="135.4223" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E982B3"/> <stop offset="1" style="stop-color:#EB90B5"/> </linearGradient> <polygon class="st30" points="1011.4,617.1 1070.3,518.1 1006.7,594.7 "/> <linearGradient id="SVGID_32_" gradientUnits="userSpaceOnUse" x1="7710.7119" y1="2734.3523" x2="13906.7119" y2="-1702.6478" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#EB7EB6"/> <stop offset="1" style="stop-color:#ED93BA"/> </linearGradient> <polygon class="st31" points="1202.3,654.8 1070.3,518.1 1011.4,617.1 "/> <linearGradient id="SVGID_33_" gradientUnits="userSpaceOnUse" x1="35219.4688" y1="-2674.1736" x2="39044.4688" y2="-10448.1738" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#BA5EC6"/> <stop offset="1" style="stop-color:#B650BA"/> </linearGradient> <polygon class="st32" points="1870.5,918.8 1888.2,698.4 1779.8,890.5 "/> <linearGradient id="SVGID_34_" gradientUnits="userSpaceOnUse" x1="37431.2656" y1="-5202.9653" x2="40264.2656" y2="-8534.9658" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AF3FA5"/> <stop offset="1" style="stop-color:#C860CA"/> </linearGradient> <polygon class="st33" points="1870.5,918.8 1920,900.7 1920,726.9 1888.2,698.4 "/> <linearGradient id="SVGID_35_" gradientUnits="userSpaceOnUse" x1="5181.6489" y1="81.094" x2="9072.6484" y2="-6691.9058" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#D160BD"/> <stop offset="1" style="stop-color:#D362C1"/> </linearGradient> <polygon class="st34" points="910.1,711.4 1032.6,830.4 1011.4,617.1 "/> <linearGradient id="SVGID_36_" gradientUnits="userSpaceOnUse" x1="7859.9673" y1="-87.4371" x2="14459.9678" y2="-7462.437" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E672C3"/> <stop offset="1" style="stop-color:#D86DCA"/> </linearGradient> <polygon class="st35" points="1011.4,617.1 1032.6,830.4 1202.3,654.8 "/> <linearGradient id="SVGID_37_" gradientUnits="userSpaceOnUse" x1="16199.8867" y1="-12308.8564" x2="20809.8867" y2="-14394.8564" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#AF56B6"/> <stop offset="1" style="stop-color:#B160B3"/> </linearGradient> <polygon class="st36" points="1234.1,971.8 1334.3,1039 1382.6,1000.1 "/> <linearGradient id="SVGID_38_" gradientUnits="userSpaceOnUse" x1="16123.0303" y1="-6916.147" x2="23108.0293" y2="-13817.1475" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CA70D6"/> <stop offset="1" style="stop-color:#C16DC1"/> </linearGradient> <polygon class="st37" points="1255.4,804.5 1382.6,1000.1 1453.4,975.3 "/> <linearGradient id="SVGID_39_" gradientUnits="userSpaceOnUse" x1="19307" y1="-13248.333" x2="24753" y2="-14786.333" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#B160B1"/> <stop offset="1" style="stop-color:#BA6BBA"/> </linearGradient> <polygon class="st38" points="1382.6,1000.1 1334.3,1039 1488.7,995.4 "/> <linearGradient id="SVGID_40_" gradientUnits="userSpaceOnUse" x1="20978.8164" y1="-12679.2861" x2="24720.8164" y2="-13552.2861" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C16DC1"/> <stop offset="1" style="stop-color:#BD6DBF"/> </linearGradient> <polygon class="st39" points="1382.6,1000.1 1488.7,995.4 1453.4,975.3 "/> <linearGradient id="SVGID_41_" gradientUnits="userSpaceOnUse" x1="14918.7852" y1="2961.0852" x2="19492.7852" y2="-2068.915" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E279AA"/> <stop offset="1" style="stop-color:#D36783"/> </linearGradient> <polygon class="st40" points="1316.6,685.4 1332,542.8 1202.3,654.8 "/> <linearGradient id="SVGID_42_" gradientUnits="userSpaceOnUse" x1="18448.7969" y1="1847.6938" x2="27308.7969" y2="-2982.3059" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#CA597E"/> <stop offset="1" style="stop-color:#B63F62"/> </linearGradient> <polygon class="st41" points="1578.3,599.4 1332,542.8 1316.6,685.4 "/> <linearGradient id="SVGID_43_" gradientUnits="userSpaceOnUse" x1="10967.668" y1="4529.6211" x2="15623.668" y2="-293.3789" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#F0A5B1"/> <stop offset="1" style="stop-color:#ED90AF"/> </linearGradient> <polygon class="st42" points="1192.9,534.6 1070.3,518.1 1202.3,654.8 "/> <linearGradient id="SVGID_44_" gradientUnits="userSpaceOnUse" x1="14365.7578" y1="2964.2297" x2="19173.7578" y2="-1191.7705" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#E883AC"/> <stop offset="1" style="stop-color:#E28085"/> </linearGradient> <polygon class="st43" points="1332,542.8 1192.9,534.6 1202.3,654.8 "/> <linearGradient id="SVGID_45_" gradientUnits="userSpaceOnUse" x1="35374.6914" y1="-9364.8174" x2="38447.6914" y2="-12836.8174" gradientTransform="matrix(2.834646e-02 0 0 -2.834646e-02 787.0394 619.8425)"> <stop offset="0" style="stop-color:#C175DB"/> <stop offset="1" style="stop-color:#C67CE6"/> </linearGradient> </svg>