主页 / 问题 / 1322886
Accepted
kiskiskit
Asked:2022-08-31 10:26:27 +0800 CST2022-08-31 10:26:27 +0800 CST

如何实现一系列线条动画和立方体绘画

  • 772

请告诉我如何使用 svg 图形为块设置动画。有必要沿线形成一个光束，该光束将向正方形移动，并且可以点燃它，使正方形“活跃”。请告诉我该怎么做

<div class="svg-anim">
  <svg width="1440" height="460" viewBox="0 0 1440 460" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M269.996 259.827L270.48 261.235C270.643 261.711 270.725 262.208 270.723 262.709V340.325C270.719 341.323 270.442 342.303 269.92 343.169C269.398 344.035 268.649 344.757 267.746 345.264L198.181 384.188C194.529 386.233 190.368 387.311 186.13 387.311C181.892 387.311 177.731 386.233 174.079 384.188L103.242 344.564C102.718 344.276 102.282 343.863 101.978 343.364C101.674 342.866 101.513 342.3 101.511 341.724V263.886C101.498 262.628 101.795 261.385 102.377 260.255L102.714 259.597" fill="#FFEEBA"/>
<path d="M269.996 259.827L270.48 261.235C270.643 261.711 270.725 262.208 270.723 262.709V340.325C270.719 341.323 270.442 342.303 269.92 343.169C269.398 344.035 268.649 344.757 267.746 345.264L198.181 384.188C194.529 386.233 190.368 387.311 186.13 387.311C181.892 387.311 177.731 386.233 174.079 384.188L103.242 344.564C102.718 344.276 102.282 343.863 101.978 343.364C101.674 342.866 101.513 342.3 101.511 341.724V263.886C101.498 262.628 101.795 261.385 102.377 260.255L102.714 259.597" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M176.936 304.036L105.32 264.964C104.546 264.539 103.903 263.926 103.455 263.189C103.008 262.452 102.773 261.617 102.773 260.766C102.773 259.915 103.008 259.079 103.455 258.342C103.903 257.605 104.546 256.993 105.32 256.567L176.901 217.002C179.939 215.32 183.393 214.438 186.907 214.445C190.422 214.452 193.871 215.349 196.902 217.043L267.634 256.559C268.404 256.99 269.041 257.607 269.482 258.346C269.923 259.085 270.152 259.922 270.147 260.772C270.142 261.622 269.902 262.455 269.452 263.19C269.002 263.924 268.357 264.533 267.582 264.956L195.941 304.044C193.048 305.621 189.772 306.451 186.437 306.449C183.103 306.448 179.827 305.616 176.936 304.036Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M188.333 237.641L152.218 216.96L186.81 196.14L223.185 215.314L188.333 237.641Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M223.185 258.362L188.281 279.108L187.97 236.611L223.185 215.314V258.362Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M188.273 279.108L152.539 260.354L152.591 217.076L187.953 237.023L188.273 279.108Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M188.195 237.426L158.276 220.253L186.94 203.056L216.226 219.578L188.195 237.426Z" fill="#FCF572"/>
<path d="M188.196 272.118L158.598 256.592V220.575L187.885 237.097L188.196 272.118Z" fill="#FCF572"/>
<path d="M618.771 65.5398L619.255 66.9476C619.418 67.4234 619.5 67.9209 619.498 68.4212V146.037C619.494 147.035 619.217 148.015 618.695 148.881C618.173 149.747 617.424 150.469 616.521 150.977L546.956 189.9C543.304 191.945 539.143 193.024 534.905 193.024C530.667 193.024 526.506 191.945 522.854 189.9L452.017 150.277C451.493 149.989 451.057 149.575 450.753 149.077C450.449 148.578 450.288 148.013 450.286 147.437V69.5985C450.287 68.3374 450.598 67.0939 451.195 65.9679L451.532 65.3093" fill="#FFEEBA"/>
<path d="M618.771 65.5398L619.255 66.9476C619.418 67.4234 619.5 67.9209 619.498 68.4212V146.037C619.494 147.035 619.217 148.015 618.695 148.881C618.173 149.747 617.424 150.469 616.521 150.977L546.956 189.9C543.304 191.945 539.143 193.024 534.905 193.024C530.667 193.024 526.506 191.945 522.854 189.9L452.017 150.277C451.493 149.989 451.057 149.575 450.753 149.077C450.449 148.578 450.288 148.013 450.286 147.437V69.5985C450.287 68.3374 450.598 67.0939 451.195 65.9679L451.532 65.3093" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M525.71 109.748L454.094 70.6769C453.32 70.2512 452.677 69.6391 452.229 68.9022C451.782 68.1652 451.547 67.3292 451.547 66.4783C451.547 65.6274 451.782 64.7915 452.229 64.0545C452.677 63.3175 453.32 62.7054 454.094 62.2797L525.675 22.7143C528.713 21.0327 532.167 20.1503 535.681 20.1576C539.196 20.1648 542.645 21.0614 545.676 22.7554L616.408 62.2715C617.178 62.7032 617.815 63.3194 618.256 64.0587C618.697 64.7979 618.926 65.6343 618.921 66.4843C618.916 67.3343 618.676 68.168 618.226 68.9023C617.776 69.6366 617.131 70.2456 616.356 70.6687L544.715 109.757C541.822 111.334 538.546 112.163 535.211 112.162C531.877 112.16 528.601 111.328 525.71 109.748Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1173.98 127.094C1174.25 127.496 1174.44 127.945 1174.53 128.415C1174.62 128.885 1174.61 129.367 1174.5 129.834C1174.4 130.301 1174.2 130.744 1173.91 131.137C1173.62 131.53 1173.26 131.865 1172.84 132.124L968.142 251.035L961.219 246.918L1168.73 125.736C1169.61 125.254 1170.66 125.126 1171.65 125.381C1172.63 125.635 1173.47 126.252 1173.98 127.094Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1218.94 43.1391L1189.65 26.6164L1217.68 8.76831L1246.97 25.291L1218.94 43.1391Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1247.28 60.6496L1218.94 77.8309L1218.68 42.6369L1246.97 25.291L1247.28 60.6496Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1218.94 77.8309L1189.34 62.3044V26.2872L1218.62 42.8016L1218.94 77.8309Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M121.745 313.47L-115.141 450.877C-117.096 452.011 -117.716 454.438 -116.525 456.298L-116.521 456.305C-115.33 458.166 -112.781 458.755 -110.826 457.621L126.06 320.214C128.015 319.08 128.635 316.653 127.445 314.793L127.44 314.785C126.25 312.925 123.7 312.336 121.745 313.47Z" fill="#F6C513" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M577.099 128.099C577.686 127.23 578.611 126.618 579.672 126.396C580.732 126.174 581.842 126.36 582.759 126.913L814.282 260.593L812.551 266.356L578.604 133.417C577.665 132.9 576.979 132.05 576.697 131.054C576.415 130.057 576.559 128.994 577.099 128.099Z" fill="#F6C513" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M486.748 125.415L264.233 255.003L270.292 259.119L490.876 131.861C491.322 131.604 491.71 131.266 492.019 130.866C492.327 130.466 492.55 130.012 492.674 129.531C492.797 129.049 492.82 128.549 492.74 128.058C492.66 127.568 492.48 127.098 492.209 126.674C491.937 126.25 491.58 125.882 491.159 125.589C490.738 125.296 490.26 125.085 489.752 124.968C489.245 124.851 488.719 124.831 488.203 124.907C487.688 124.984 487.193 125.156 486.748 125.415Z" fill="#F6C513" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1263.01 131.993L1483.64 260.766L1489.76 256.888L1267.18 125.58C1266.28 125.051 1265.21 124.883 1264.18 125.111C1263.15 125.34 1262.27 125.946 1261.71 126.798V126.798C1261.16 127.651 1260.99 128.677 1261.23 129.651C1261.47 130.625 1262.11 131.467 1263.01 131.993Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1207.57 110.045L1135.96 70.9734C1135.18 70.5477 1134.54 69.9356 1134.09 69.1986C1133.65 68.4616 1133.41 67.6257 1133.41 66.7748C1133.41 65.9239 1133.65 65.0879 1134.09 64.3509C1134.54 63.6139 1135.18 63.0019 1135.96 62.5762L1207.54 23.0107C1210.57 21.323 1214.03 20.4335 1217.54 20.4335C1221.06 20.4335 1224.51 21.323 1227.54 23.0107L1298.27 62.5268C1299.04 62.9585 1299.68 63.5747 1300.12 64.314C1300.56 65.0532 1300.79 65.8896 1300.79 66.7396C1300.78 67.5895 1300.54 68.4233 1300.09 69.1576C1299.64 69.8919 1299 70.5009 1298.22 70.9239L1226.58 110.012C1223.69 111.596 1220.42 112.432 1217.08 112.438C1213.75 112.444 1210.47 111.619 1207.57 110.045V110.045Z" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1300.66 65.8363L1301.15 67.244C1301.31 67.7199 1301.39 68.2173 1301.39 68.7176V146.334C1301.38 147.332 1301.11 148.312 1300.59 149.178C1300.06 150.044 1299.31 150.766 1298.41 151.273L1228.83 190.205C1225.18 192.25 1221.02 193.328 1216.78 193.328C1212.54 193.328 1208.38 192.25 1204.73 190.205L1133.89 150.574C1133.37 150.285 1132.93 149.872 1132.63 149.373C1132.32 148.875 1132.16 148.309 1132.16 147.733V69.8784C1132.15 68.6206 1132.44 67.3773 1133.03 66.2479L1133.36 65.5893" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M1218.54 42.8263L1183.18 22.8707L1217.03 1.32623L1252.39 21.2818L1218.54 42.8263Z" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M1253.15 64.3707L1218.91 85.1167L1218.61 42.6205L1252.77 21.6769L1253.15 64.3707Z" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M1218.91 85.1167L1183.18 66.363V22.8706L1218.54 42.8262L1218.91 85.1167Z" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M980.526 259.827L981.011 261.235C981.173 261.711 981.255 262.208 981.253 262.709V340.325C981.249 341.323 980.972 342.303 980.451 343.169C979.929 344.035 979.179 344.757 978.276 345.264L908.711 384.188C905.059 386.233 900.898 387.311 896.66 387.311C892.422 387.311 888.261 386.233 884.609 384.188L813.772 344.564C813.248 344.276 812.812 343.863 812.508 343.364C812.205 342.866 812.044 342.3 812.041 341.724V263.886C812.028 262.628 812.325 261.385 812.907 260.255L813.244 259.597" fill="#FFEEBA"/>
<path d="M980.526 259.827L981.011 261.235C981.173 261.711 981.255 262.208 981.253 262.709V340.325C981.249 341.323 980.972 342.303 980.451 343.169C979.929 344.035 979.179 344.757 978.276 345.264L908.711 384.188C905.059 386.233 900.898 387.311 896.66 387.311C892.422 387.311 888.261 386.233 884.609 384.188L813.772 344.564C813.248 344.276 812.812 343.863 812.508 343.364C812.205 342.866 812.044 342.3 812.041 341.724V263.886C812.028 262.628 812.325 261.385 812.907 260.255L813.244 259.597" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M887.466 304.036L815.85 264.964C815.076 264.539 814.432 263.926 813.985 263.189C813.538 262.452 813.303 261.617 813.303 260.766C813.303 259.915 813.538 259.079 813.985 258.342C814.432 257.605 815.076 256.993 815.85 256.567L887.431 217.002C890.469 215.32 893.922 214.438 897.437 214.445C900.952 214.452 904.401 215.349 907.431 217.043L978.164 256.559C978.934 256.99 979.571 257.607 980.012 258.346C980.453 259.085 980.682 259.922 980.677 260.772C980.672 261.622 980.432 262.455 979.982 263.19C979.532 263.924 978.887 264.533 978.112 264.956L906.471 304.044C903.578 305.621 900.301 306.451 896.967 306.449C893.633 306.448 890.357 305.616 887.466 304.036Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M219.274 217.701L187.702 236.718L158.277 220.253" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M173 266V227" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M537.108 42.5299L500.993 21.8498L535.585 1.02975L571.96 20.2033L537.108 42.5299Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M571.96 63.2512L537.057 83.9971L536.745 41.5009L571.96 20.2034V63.2512Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M537.048 83.9971L501.313 65.2435L501.365 21.9651L536.727 41.9125L537.048 83.9971Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M536.969 42.3159L507.051 25.1429L535.714 7.94513L565.001 24.4678L536.969 42.3159Z" fill="#FCF572"/>
<path d="M565.314 59.8264L536.971 77.0077L536.711 41.8137L565.002 24.4678L565.314 59.8264Z" fill="#FCF572"/>
<path d="M568.048 22.5907L536.477 41.6078L507.052 25.1428" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.863 236.817L862.748 216.137L897.34 195.317L933.714 214.491L898.863 236.817Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M933.713 257.539L898.81 278.284L898.498 235.788L933.713 214.491V257.539Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.802 278.284L863.068 259.531L863.12 216.252L898.482 236.2L898.802 278.284Z" fill="#F5F693" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.723 271.295L869.125 255.768V219.751L898.403 236.274L898.723 271.295Z" fill="#FCF572"/>
<path d="M929.803 216.878L898.232 235.895L868.807 219.43" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M898.802 273.279L898.23 235.895" stroke="#787878" stroke-width="1.6465" stroke-linejoin="round"/>
<path d="M895.298 387.373V305.822" stroke="#302D2C" stroke-width="1.6465" stroke-miterlimit="10"/>
<path d="M534.746 192.263V112.128" stroke="#787878" stroke-width="1.6465" stroke-miterlimit="10"/>
</svg>
</div>

html

1 个回答

  1. Best Answer

    svg文件优化

    由于 12k 的大尺寸和混乱的代码，问题中的代码很难使用。与不同形状相关的路径是混乱的，连接立方体的线是用双路径绘制的，所以它们不能被动画化。

    用SVGOMG优化后，文件大小减少到 4k
    ，剩下的问题只能手动解决。

    立方体之间的跑球动画解决了

     <!-- анимация первой линии -->
  <circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL1" dur="1.5s" begin="svg1.click" repeatCount="1" fill="freeze" restart="never">
      <mpath xlink:href="#line1_1"></mpath>
    </animateMotion>
  </circle>

    立方体颜色动画：

    <animate id="anCub1" attributeName="fill" begin="anL1.end"  dur="1s" values="#F5F693;crimson" fill="freeze" />

    在哪里

    begin="anL1.end"- 在跑球动画结束后开始绘制立方体动画的条件

    动画将在单击后开始，只有在重新加载代码片段后才能重新启动应用程序。

    <div class="svg-anim" style="width:75vw;height:75wh">
<svg id="svg1"  viewBox="0 0 1440 460" fill="none" xmlns="http://www.w3.org/2000/svg">
<filter id="spot-light">
    <feGaussianBlur stdDeviation="10" result="blur" />
        <feSpecularLighting result="spec" in="blur" specularExponent="55" lighting-color="#529fd9">
        <fePointLight z="50"></fePointLight>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="comp1"/>
  </filter>

  <rect  width="100%" height="100%"  fill="blue" />
     <!-- анимация первой линии -->
  <circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL1" dur="1.5s" begin="svg1.click" repeatCount="1" fill="freeze" restart="never">
      <mpath xlink:href="#line1_1"></mpath>
    </animateMotion>
  </circle> 
       <!-- анимация второй линии -->
  <circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL2" dur="2s" begin="anCub1.end" repeatCount="1" fill="freeze" restart="never">
      <mpath xlink:href="#line1_2"></mpath>
    </animateMotion>
  </circle> 
      <!-- анимация третьей линии -->
<circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL3" dur="2s" begin="anCub2.end" repeatCount="1"  restart="never">
      <mpath xlink:href="#line1_3"></mpath>
    </animateMotion>
</circle>   
        <!-- анимация 4 линии -->
    <circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
        <animateMotion id="anL4" dur="2s" begin="anCub3.end" repeatCount="1" fill="freeze" restart="never">
          <mpath xlink:href="#line1_4"></mpath>
        </animateMotion>
    </circle>  
      
<g id="cub1" fill="#F5F693">
<path d="M270 260v1l1 2v77l-1 3-2 2-70 39a25 25 0 0 1-24 0l-71-39-1-2v-83h1" />
<path d="M270 260v1l1 2v77l-1 3-2 2-70 39a25 25 0 0 1-24 0l-71-39-1-2v-83h1" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>
<path d="m177 304-72-39-2-2a5 5 0 0 1 0-5l2-1 72-40a21 21 0 0 1 20 0l71 40 1 1a5 5 0 0 1 0 5l-1 2-72 39a20 20 0 0 1-19 0Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path d="m188 238-36-21 35-21 36 19-35 23Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
<path d="m223 258-35 21v-42l35-22v43ZM188 279l-35-19v-43l35 20v42Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/> 

<path d="m188 237-30-17 29-17 29 17-28 17ZM188 272l-29-15v-36l29 16v35Z" fill="#FCF572"/> 
           <!-- анимация закраски cub1 -->
  <animate id="anCub1" attributeName="fill" begin="anL1.end"  dur="1s" values="#F5F693;crimson" fill="freeze" />
</g>
<g id="cub2" fill="#F5F693">
<path d="M619 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" />

<path d="M619 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path d="m526 110-72-39-2-2a5 5 0 0 1 0-5l2-2 72-39a21 21 0 0 1 20 0l70 39 2 2a5 5 0 0 1 0 5l-2 2-71 39a20 20 0 0 1-19 0Z"  stroke="#787878" fill="#F7DFAD"  stroke-width="1.6" stroke-miterlimit="10"/> 
     <!-- анимация закраски cub2 -->
  <animate id="anCub2" attributeName="fill" begin="anL2.end"  dur="1s" values="#F5F693;crimson" fill="freeze" />
</g>
       <!-- Соединительные линии между кубиками -->
 <g stroke="#529fd9" stroke-width="7" stroke-lineCap="round">
<path id="line1_1"  d="M -13.801536,419.97826 130.50958,336.6602" />

<path id="line1_2"  d="M 267.79951,256.35941 485.42787,130.36675"  />

<path id="line1_3"  d="M 577,128 813.46679,263.66603" />

</g>
  
  <g id="cub3" fill="#F5F693">
<path d="M981 260v80l-1 3-2 2-69 39a25 25 0 0 1-24 0l-71-39-1-2-1-1v-78l1-4" />
    <!-- анимация закраски cub3 -->
  <animate id="anCub3" attributeName="fill" begin="anL3.end"  dur="1s" values="#F5F693;crimson" fill="freeze" />
  
<path d="M981  260v80l-1 3-2 2-69 39a25 25 0 0 1-24 0l-71-39-1-2-1-1v-78l1-4" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path d="m887 304-71-39-2-2a5 5 0 0 1 0-5l2-1 71-40a21 21 0 0 1 20 0l71 40 2 1a5 5 0 0 1 0 5l-2 2-72 39a20 20 0 0 1-19 0Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path fill="none"  d="m219  218-31 19-30-17M173 266v-39" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
<path  d="m537 43-36-21 35-21 36 19-35 23Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>

<path d="m572 63-35 21V42l35-22v43ZM537 84l-36-19V22l36 20v42Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>


<path d="m537 42-30-17 29-17 29 16-28 18Z" fill="#FCF572"/>

<path d="m565 60-28 17V42l28-18v36Z" fill="#FCF572"/>
<path fill="none" d="m568 23-32 19-29-17" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
<path d="m899 237-36-21 34-21 37 19-35 23Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>

<path d="m934 258-35 20-1-42 36-22v44Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/> 

<path d="m899 278-36-18v-44l35 20 1 42Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>


</g>
<path d="m930 217-32 19-29-17M899 273l-1-37" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
<path d="M895 387v-81" stroke="#302D2C" stroke-width="1.6" stroke-miterlimit="10"/>
<path d="M535 192v-80" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>
 
 <g  id="cub4" fill="#F5F693">
  <path id="path889" d="M1303 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" fill="#ffeeba"/>
  <path id="path891" stroke-miterlimit="10" d="M1303 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" stroke="#787878" stroke-width="1.6"/>
  <path id="path893" stroke-miterlimit="10" d="m1210 110-72-39-2-2a5 5 0 0 1 0-5l2-2 72-39a21 21 0 0 1 20 0l70 39 2 2a5 5 0 0 1 0 5l-2 2-71 39a20 20 0 0 1-19 0z" fill="#f7dfad" stroke="#787878" stroke-width="1.6"/>
  <path id="path895" d="m1221 43-36-21 35-21 36 19z" fill="#f5f693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
  <path id="path897" d="m1256 63-35 21V42l35-22zm-35 21-36-19V22l36 20z" fill="#f5f693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
  <path id="path899" d="1m1221 42-30-17 29-17 29 16z" fill="#fcf572"/>
  <path id="path901" d="1m1249 60-28 17V42l28-18z" fill="#fcf572"/>
  <path id="path903" d="1m1252 23-32 19-29-17" stroke="#787878" fill="#fcf572" stroke-width="1.6" stroke-linejoin="round"/>
  <path id="path905" stroke-miterlimit="10" d="M1219 192v-80" stroke="#787878" stroke-width="1.6"/> 
     <!-- анимация закраски cub4 -->
  <animate id="anCub4" attributeName="fill" begin="anL4.end"  dur="1s" values="#F5F693;crimson" fill="freeze" />
  </g>
   <path id="line1_4" stroke="#529fd9" stroke-width="7" stroke-lineCap="round" d="M 965.35941,248.35941 1174,127" /> 

</svg>
</div>

    使用渐变动画绘制立方体的选项

    <linearGradient id="Lg1">
      <stop offset="0%" stop-color="#f2f2f2" />
      <stop offset="33%" stop-color="red" />
      <stop offset="50%" stop-color="#f2f2f2" />
      <stop offset="67%" stop-color="red" />
      <stop offset="100%" stop-color="#f2f2f2" />
      <animateTransform id="anT1" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="anL1.end"
        dur="1s"
        repeatCount="1"/>
    </linearGradient>

    动画序列构造逻辑与第一个示例相同 -begin="anL1.end"

    <div class="svg-anim" style="width:75vw;height:75wh">
<svg id="svg1"  viewBox="0 0 1440 460" fill="none" xmlns="http://www.w3.org/2000/svg">
<filter id="spot-light">
    <feGaussianBlur stdDeviation="10" result="blur" />
        <feSpecularLighting result="spec" in="blur" specularExponent="55" lighting-color="#529fd9">
        <fePointLight z="50"></fePointLight>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="comp1"/>
  </filter>
<defs>
 <linearGradient id="Lg1">
      <stop offset="0%" stop-color="#f2f2f2" />
      <stop offset="33%" stop-color="red" />
      <stop offset="50%" stop-color="#f2f2f2" />
      <stop offset="67%" stop-color="red" />
      <stop offset="100%" stop-color="#f2f2f2" />
      <animateTransform id="anT1" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="anL1.end"
        dur="1s"
        repeatCount="1"/>
    </linearGradient>
<linearGradient id="Lg2">
      <stop offset="0%" stop-color="#f2f2f2" />
      <stop offset="33%" stop-color="red" />
      <stop offset="50%" stop-color="#f2f2f2" />
      <stop offset="67%" stop-color="red" />
      <stop offset="100%" stop-color="#f2f2f2" />
      <animateTransform id="anT2" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="anL2.end"
        dur="1s"
        repeatCount="1"/>
</linearGradient>   
    <linearGradient id="Lg3">
      <stop offset="0%" stop-color="#f2f2f2" />
      <stop offset="33%" stop-color="red" />
      <stop offset="50%" stop-color="#f2f2f2" />
      <stop offset="67%" stop-color="red" />
      <stop offset="100%" stop-color="#f2f2f2" />
      <animateTransform id="anT3" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="anL3.end"
        dur="1s"
        repeatCount="1"/>
    </linearGradient>   
<linearGradient id="Lg4">
      <stop offset="0%" stop-color="#f2f2f2" />
      <stop offset="33%" stop-color="red" />
      <stop offset="50%" stop-color="#f2f2f2" />
      <stop offset="67%" stop-color="red" />
      <stop offset="100%" stop-color="#f2f2f2" />
      <animateTransform id="anT4" attributeName="gradientTransform"
        type="translate"
        from="-1 0"
        to="1 0"
        begin="anL4.end"
        dur="1s"
        repeatCount="1"/>
    </linearGradient>       
</defs>
  <rect  width="100%" height="100%"  fill="blue" />
     <!-- анимация первой линии -->
  <circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL1" dur="1.5s" begin="svg1.click" repeatCount="1" fill="freeze" restart="never">
      <mpath xlink:href="#line1_1"></mpath>
    </animateMotion>
  </circle> 
       <!-- анимация второй линии -->
  <circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL2" dur="2s" begin="anT1.end" repeatCount="1" fill="freeze" restart="never">
      <mpath xlink:href="#line1_2"></mpath>
    </animateMotion>
  </circle> 
      <!-- анимация третьей линии -->
<circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL3" dur="2s" begin="anT2.end" repeatCount="1"  restart="never">
      <mpath xlink:href="#line1_3"></mpath>
    </animateMotion>
</circle>   
        <!-- анимация 4 линии -->
    <circle cx="" cy="" r="250"  fill="blue" filter="url(#spot-light)">
        <animateMotion id="anL4" dur="2s" begin="anT3.end" repeatCount="1" fill="freeze" restart="never">
          <mpath xlink:href="#line1_4"></mpath>
        </animateMotion>
    </circle>  
      
<g id="cub1" fill="url(#Lg1)" >
<path d="M270 260v1l1 2v77l-1 3-2 2-70 39a25 25 0 0 1-24 0l-71-39-1-2v-83h1" />
<path d="M270 260v1l1 2v77l-1 3-2 2-70 39a25 25 0 0 1-24 0l-71-39-1-2v-83h1" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>
<path d="m177 304-72-39-2-2a5 5 0 0 1 0-5l2-1 72-40a21 21 0 0 1 20 0l71 40 1 1a5 5 0 0 1 0 5l-1 2-72 39a20 20 0 0 1-19 0Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path d="m188 238-36-21 35-21 36 19-35 23Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
<path d="m223 258-35 21v-42l35-22v43ZM188 279l-35-19v-43l35 20v42Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/> 

</g>
<g id="cub2" fill="url(#Lg2)">
<path d="M619 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" />

<path d="M619 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path d="m526 110-72-39-2-2a5 5 0 0 1 0-5l2-2 72-39a21 21 0 0 1 20 0l70 39 2 2a5 5 0 0 1 0 5l-2 2-71 39a20 20 0 0 1-19 0Z"  stroke="#787878" fill="#F7DFAD"  stroke-width="1.6" stroke-miterlimit="10"/> 
   
</g>


       <!-- Соединительные линии между кубиками -->
 <g stroke="#529fd9" stroke-width="7" stroke-lineCap="round">
<path id="line1_1"  d="M -13.801536,419.97826 130.50958,336.6602" />

<path id="line1_2"  d="M 267.79951,256.35941 485.42787,130.36675"  />

<path id="line1_3"  d="M 577,128 813.46679,263.66603" />

</g>


  
  <g id="cub3" fill="url(#Lg3)">
<path d="M981 260v80l-1 3-2 2-69 39a25 25 0 0 1-24 0l-71-39-1-2-1-1v-78l1-4" />
     
<path d="M981  260v80l-1 3-2 2-69 39a25 25 0 0 1-24 0l-71-39-1-2-1-1v-78l1-4" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path d="m887 304-71-39-2-2a5 5 0 0 1 0-5l2-1 71-40a21 21 0 0 1 20 0l71 40 2 1a5 5 0 0 1 0 5l-2 2-72 39a20 20 0 0 1-19 0Z" fill="#F7DFAD" stroke="#787878" stroke-width="1.6" stroke-miterlimit="10"/>

<path fill="none"  d="m219  218-31 19-30-17M173 266v-39" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
<path  d="m537 43-36-21 35-21 36 19-35 23Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>

<path d="m572 63-35 21V42l35-22v43ZM537 84l-36-19V22l36 20v42Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>


<path d="m537 42-30-17 29-17 29 16-28 18Z" fill="#FCF572"/>

<path d="m565 60-28 17V42l28-18v36Z" fill="#FCF572"/>
<path fill="none" d="m568 23-32 19-29-17" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
<path d="m899 237-36-21 34-21 37 19-35 23Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>

<path d="m934 258-35 20-1-42 36-22v44Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/> 

<path d="m899 278-36-18v-44l35 20 1 42Z" fill="#F5F693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>


</g>
<path d="m930 217-32 19-29-17M899 273l-1-37" stroke="#787878" stroke-width="0" stroke-linejoin="round"/>
<path d="M895 387v-81" stroke="#302D2C" stroke-width="0" />
<path d="M535 192v-80" stroke="#787878" stroke-width="0" />
 
 <g  id="cub4" fill="url(#Lg4)">
  <path id="path889" d="M1303 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" fill="#ffeeba"/>
  <path id="path891" stroke-miterlimit="10" d="M1303 66v83l-2 2-70 39a25 25 0 0 1-24 0l-71-40-1-1-1-2V70l1-4 1-1" stroke="#787878" stroke-width="1.6"/>
  <path id="path893" stroke-miterlimit="10" d="m1210 110-72-39-2-2a5 5 0 0 1 0-5l2-2 72-39a21 21 0 0 1 20 0l70 39 2 2a5 5 0 0 1 0 5l-2 2-71 39a20 20 0 0 1-19 0z" fill="#f7dfad" stroke="#787878" stroke-width="1.6"/>
  <path id="path895" d="m1221 43-36-21 35-21 36 19z" fill="#f5f693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
  <path id="path897" d="m1256 63-35 21V42l35-22zm-35 21-36-19V22l36 20z" fill="#f5f693" stroke="#787878" stroke-width="1.6" stroke-linejoin="round"/>
  <path id="path899" d="1m1221 42-30-17 29-17 29 16z" fill="#fcf572"/>
  <path id="path901" d="1m1249 60-28 17V42l28-18z" fill="#fcf572"/>
  <path id="path903" d="1m1252 23-32 19-29-17" stroke="#787878" fill="#fcf572" stroke-width="1.6" stroke-linejoin="round"/>
  <path id="path905" stroke-miterlimit="10" d="M1219 192v-80" stroke="#787878" stroke-width="0"/> 
    
  </g>
   <path id="line1_4" stroke="#529fd9" stroke-width="7" stroke-lineCap="round" d="M 965.35941,248.35941 1174,127" /> 

</svg>
</div>

    • 5

相关问题