Анимирование позиций SVG элементов через JS

Question

Анимирование позиций SVG элементов через JS

Рейтинг: 1Ответов: 1Опубликовано: 05.05.2023

У меня есть SVG картинка. Мне нужно, чтобы при горизонтальном передвижении мыши группы svg объектов() перемещались в право и влево. Чем дальше мышь отходит от центра экрана, тем больше каждый слой отклоняется вправо, влево. Чем слой дальше от зрителя, тем он меньше отклоняется. Мне нужно, чтобы создавался эффект трёхмерной картинки.

Объекты, которые не имеют id и не находятся в какой-либо группе - статичны.

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 1920 1080" width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
  <rect width="1920" height="1080" style="stroke-linecap: round; stroke-miterlimit: 1; stroke-dashoffset: 18px; stroke-width: 5px; fill: rgb(132, 208, 255);"/>

     <g id="SvgLayer0">
  <g transform="matrix(0.979036, -0.203695, 0.203695, 0.979036, -18.862003, 224.565323)" >
    <path d="M 1354.934 529.537 L 1357.574 526.214 L 1360.492 526.066 L 1359.226 533.922 L 1353.278 533.874 L 1338 534.835 L 1338.159 529.014 L 1348.377 529.006 L 1354.934 529.537 Z" style="fill: rgb(169, 72, 53);"/>
    <path d="M 1340.746 527.008 L 1348.935 526.527 L 1349.295 528.334 L 1340.986 527.973 L 1340.746 527.008 Z" style="fill: rgb(144, 58, 40);"/>
    <path d="M 1341.537 533.866 L 1349.726 533.385 L 1350.086 535.192 L 1341.777 534.831 L 1341.537 533.866 Z" style="fill: rgb(144, 58, 40);"/>
    <line style="fill: rgb(216, 216, 216); stroke: rgb(144, 58, 40);" x1="1341.897" y1="527.483" x2="1349.227" y2="534.452"/>
  </g>
  <g transform="matrix(0.722973, 0, 0, 0.722973, 499.850403, 141.451859)" style="" >
    <g transform="matrix(1, 0, 0, 1, -6.706936, 2.155802)">
      <line style="fill: rgb(216, 216, 216); stroke: rgb(169, 169, 169); stroke-linecap: square; stroke-width: 3px;" x1="1377.406" y1="364.163" x2="1389.153" y2="358.297"/>
      <ellipse style="fill: rgb(151, 151, 151);" cx="1376.922" cy="364.771" rx="6.532" ry="6.532"/>
    </g>
    <g transform="matrix(-1, 0, 0, 1, 2496.178223, -2.457399)">
      <line style="fill: rgb(216, 216, 216); stroke: rgb(169, 169, 169); stroke-linecap: square; stroke-width: 3px;" x1="1377.406" y1="364.163" x2="1389.153" y2="358.297"/>
      <ellipse style="fill: rgb(151, 151, 151);" cx="1376.922" cy="364.771" rx="6.532" ry="6.532"/>
    </g>
    <g>
      <path d="M 1211.97 407.858 L 1452.449 362.44 L 1442.552 403.2 C 1442.552 403.2 1454.779 450.498 1454.779 441.63 L 1211.97 407.858 Z" style="fill: rgb(175, 173, 151);"/>
      <ellipse style="fill: rgb(166, 144, 124);" cx="1190.13" cy="446.2" rx="24.085" ry="15.104" transform="matrix(0.957944, -0.286955, 0.286955, 0.957944, -112.276604, 355.380528)"/>
      <path d="M 1102.836 363.395 L 1158.72 359.961 L 1253.038 357.961 L 1346.867 362.903 L 1403.434 371.237 L 1430.886 392.372 L 1449.029 403.814 L 1431.039 413.571 L 1408.337 434.43 L 1348.338 442.764 L 1253.038 449.667 L 1158.72 447.667 L 1109.016 443.745 L 1072.736 424.269 L 1064.401 403.814 L 1074.535 376.989 L 1102.836 363.395 Z" style="fill: rgb(191, 189, 167);"/>
    </g>
  </g>
  <g transform="matrix(1, 0, 0, 1, -75.832329, -24.945124)" >
    <path d="M 1354.934 529.537 L 1357.574 526.214 L 1360.492 526.066 L 1359.226 533.922 L 1353.278 533.874 L 1338 534.835 L 1338.159 529.014 L 1348.377 529.006 L 1354.934 529.537 Z" style="fill: rgb(169, 72, 53);"/>
    <path d="M 1340.746 527.008 L 1348.935 526.527 L 1349.295 528.334 L 1340.986 527.973 L 1340.746 527.008 Z" style="fill: rgb(144, 58, 40);"/>
    <path d="M 1341.537 533.866 L 1349.726 533.385 L 1350.086 535.192 L 1341.777 534.831 L 1341.537 533.866 Z" style="fill: rgb(144, 58, 40);"/>
    <line style="fill: rgb(216, 216, 216); stroke: rgb(144, 58, 40);" x1="1341.897" y1="527.483" x2="1349.227" y2="534.452"/>
  </g>
  <g transform="matrix(1, 0, 0, 1, 0, 2.32215)" >
    <path d="M 1469.663 353.282 L 1472.303 349.959 L 1475.221 349.811 L 1473.955 357.667 L 1468.007 357.619 L 1452.729 358.58 L 1452.888 352.759 L 1463.106 352.751 L 1469.663 353.282 Z" style="fill: rgb(79, 131, 148);"/>
    <path d="M 1455.475 350.753 L 1463.664 350.272 L 1464.024 352.079 L 1455.715 351.718 L 1455.475 350.753 Z" style="fill: rgb(61, 112, 134);"/>
    <path d="M 1456.266 357.611 L 1464.455 357.13 L 1464.815 358.937 L 1456.506 358.576 L 1456.266 357.611 Z" style="fill: rgb(61, 112, 134);"/>
    <line style="fill: rgb(216, 216, 216); stroke: rgb(61, 112, 134);" x1="1456.626" y1="351.228" x2="1463.956" y2="358.197"/>
  </g>
  <g >
    <path d="M 1562.51 510.091 L 1565.15 506.768 L 1568.068 506.62 L 1566.802 514.476 L 1560.854 514.428 L 1545.576 515.389 L 1545.735 509.568 L 1555.953 509.56 L 1562.51 510.091 Z" style="fill: rgb(68, 120, 39);"/>
    <path d="M 1548.322 507.562 L 1556.511 507.081 L 1556.871 508.888 L 1548.562 508.527 L 1548.322 507.562 Z" style="fill: rgb(65, 105, 39);"/>
    <path d="M 1549.113 514.42 L 1557.302 513.939 L 1557.662 515.746 L 1549.353 515.385 L 1549.113 514.42 Z" style="fill: rgb(65, 105, 39);"/>
    <line style="fill: rgb(65, 105, 39); stroke: rgb(65, 105, 39);" x1="1549.473" y1="508.036" x2="1556.803" y2="515.006"/>
  </g>
         <g transform="matrix(-0.743218, 0, 0, 0.51047, 2022.434814, 358.08783)" style="" >
    <ellipse style="fill: rgb(255, 196, 95);" cx="59.317" cy="736.643" rx="588.238" ry="56.671"/>
    <path d="M 68.983 677.856 C 317.285 677.856 529.655 694.235 615.971 717.398 L -478.005 717.398 C -391.689 694.235 -179.319 677.856 68.983 677.856 Z" style="fill: rgb(135, 114, 65);"/>
    <path d="M 36.49 676.716 C 290.862 676.716 507.523 691.055 589.581 711.129 L -516.601 711.129 C -434.543 691.055 -217.882 676.716 36.49 676.716 Z" style="fill: rgb(86, 159, 79);"/>
  </g>
 </g>
<g id="SvgLayer1">
  <g class="SvgLayer1">
     <path d="M 108.701 700.726 L 289.861 695.698 L 274.511 659.722 L 253.625 612.118 L 224.226 591.592 L 191.607 607.838 L 146.609 617.895 L 119.532 653.507 L 108.701 700.726 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />
    <ellipse style="fill: rgb(255, 196, 95);" cx="59.317" cy="736.643" rx="588.238" ry="56.671"/>
    <path d="M 68.983 677.856 C 317.285 677.856 529.655 694.235 615.971 717.398 L -478.005 717.398 C -391.689 694.235 -179.319 677.856 68.983 677.856 Z" style="fill: rgb(135, 114, 65);"/>
    <path d="M 36.49 676.716 C 290.862 676.716 507.523 691.055 589.581 711.129 L -516.601 711.129 C -434.543 691.055 -217.882 676.716 36.49 676.716 Z" style="fill: rgb(86, 159, 79);"/>
  </g>

  <path d="M 526.269 717.628 L 558.888 723.431 L 586.864 717.628 L 585.318 680.081 L 576.034 642.535 L 564.304 640.213 L 548.704 658.007 L 531.684 688.977 L 526.269 717.628 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />
  <path d="M 496.685 717.187 L 519.247 724.537 L 537.165 718.734 L 544.13 681.961 L 526.335 671.492 L 520.794 663.755 L 509.063 666.849 L 499.779 686.215 L 496.685 717.187 Z" style="stroke-width: 3px; fill: rgb(58, 58, 58);" />
  <path d="M 2.71 693.935 L 50.029 698.19 L 86.515 691.613 L 74.912 655.614 L 57.117 645.145 L 40.745 619.614 L 23.599 625.802 L 8.899 656 L 2.71 693.935 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />
      <rect width="1920" height="355.97" style="fill: rgb(40, 121, 173); stroke-linecap: round; stroke-width: 11px;" y="730.695"/>
  <path d="M 216.237 767.922 L 320.805 770.053 L 301.662 740.964 L 296.277 729.012 L 285.574 725.989 L 263.112 727.837 L 244.538 707.29 L 222.284 713.151 L 216.237 767.922 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />

</g>
  <path d="M 1030.605 745.571 L 1148.365 746.053 L 1141.59 708.718 L 1127.135 695.942 L 1104.064 658.289 L 1084.901 637.051 L 1053.134 654.432 L 1039.95 694.923 L 1030.605 745.571 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;"/>
  <path d="M 939.084 753.187 L 1086.554 752.569 L 1066.574 708.632 L 1043.316 689.253 L 1005.941 678.009 L 997.781 661.172 L 974.817 684.055 L 964.934 715.743 L 939.084 753.187 Z" style="stroke-width: 3px; fill: rgb(53, 53, 53);" />

  <g id="SvgLayers3" transform="translate(0,0)">
    <g>
      <path d="M 608.626 839.935 L 619.032 856.479 L 623.002 890.027 L 613.208 874.617 L 608.626 839.935 Z" style="fill: rgb(30, 22, 7);"/>
      <path d="M 618.059 856.165 L 726.839 861.021 L 724.223 895.923 L 622.466 889.958 L 618.059 856.165 Z" style="fill: rgb(52, 43, 24);"/>
      <path d="M 726.839 861.022 L 816.389 824.281 L 777.383 873.394 L 722.892 896.646 L 726.839 861.022 Z" style="fill: rgb(62, 51, 28);"/>
      <path d="M 608.046 840.466 L 693.752 822.501 L 816.782 824.681 L 766.399 845.678 L 725.812 862.18 L 671.601 859.771 L 617.834 856.917 L 612.94 848.248 L 608.046 840.466 Z" style="fill: rgb(42, 32, 12);"/>
    </g>
    <g transform="matrix(1, 0, 0, 1, 42.91605, -80.013588)">
      <ellipse style="fill: rgb(80, 80, 80);" cx="670.495" cy="919.504" rx="38.336" ry="10.365"/>
      <line style="fill: rgb(216, 216, 216); stroke-linecap: round; stroke-width: 11px; stroke: rgb(160, 160, 160);" x1="681.944" y1="904.281" x2="716.448" y2="890.205"/>
      <path d="M 670.446 927.77 C 654.695 927.77 641.698 924.607 639.807 920.52 C 639.787 920.07 639.777 919.618 639.777 919.163 C 639.777 902.263 653.477 888.563 670.377 888.563 C 687.277 888.563 700.977 902.263 700.977 919.163 C 700.977 919.715 700.962 920.263 700.934 920.807 C 698.581 924.754 685.827 927.77 670.446 927.77 Z" style="fill: rgb(126, 126, 126);"/>
    </g>
  </g>

  <g id="SvgLayers4">
  <path d="M 1173.047 979.997 L 1686.581 1042.238 L 2171.141 1180.087 L 2095.385 1401.361 L 1173.047 979.997 Z" style="fill: rgb(255, 196, 95);" transform="matrix(0.910945, -0.412528, -0.006126, 1.100535, 144.40802, 495.495453)" />
  <path d="M 1070.01 1142.604 L 1441.902 1129.489 L 1347.842 990.758 L 1279.098 759.577 L 1218.295 733.783 L 1201.416 852.57 L 1133.945 873.884 L 1118.061 986.381 L 1070.01 1142.604 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;"/>
  <path d="M 1402.406 970.002 L 1887.335 1032.243 L 2160.093 1126.669 L 2131.093 1391.366 L 1402.406 970.002 Z" style="fill: rgb(135, 114, 65);" transform="matrix(0.910945, -0.412528, 0.412528, 0.910945, -328.435852, 839.960999)" />
  <path d="M 1450.586 979.404 L 1935.515 1041.645 L 2208.273 1136.071 L 2179.273 1400.768 L 1450.586 979.404 Z" style="fill: rgb(86, 159, 79);" transform="matrix(0.910945, -0.412528, 0.412528, 0.910945, -328.023804, 860.673889)" />
  </g>
  <script>
    let w = document.innerWidth;
    let h = document.innerHeight;
    var x = null;
    var y = null;
    l0 = document.getElementById('SvgLayers0');
    l1 = document.getElementById('SvgLayers1');
    l2 = document.getElementById('SvgLayers2');
    l3 = document.getElementById('SvgLayers3');
    l4 = document.getElementById('SvgLayers4');
    document.addEventListener('mousemove', onMouseUpdate, false);
    document.addEventListener('mouseenter', onMouseUpdate, false);
    function onMouseUpdate(e) {
      x = e.pageX;
      y = e.pageY;

    }
  </script>
</svg>

javascript svg svg-animation

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Ничего сложного - от Х-координаты курсора отнимаете половину ширины холста, чтобы точка отсчёта (читай нулевое смещение) была посередине. Далее, делите получившееся значение на нужный коэффициент, для задания нужной скорости перемещения.

(Приведите в порядок код: где-то "SvgLayer", а где-то "SvgLayers"; SvgLayers2 совсем не указан в разметке.)

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 1920 1080" width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
  <rect width="1920" height="1080" style="stroke-linecap: round; stroke-miterlimit: 1; stroke-dashoffset: 18px; stroke-width: 5px; fill: rgb(132, 208, 255);"/>

     <g id="SvgLayer0">
  <g transform="matrix(0.979036, -0.203695, 0.203695, 0.979036, -18.862003, 224.565323)" >
    <path d="M 1354.934 529.537 L 1357.574 526.214 L 1360.492 526.066 L 1359.226 533.922 L 1353.278 533.874 L 1338 534.835 L 1338.159 529.014 L 1348.377 529.006 L 1354.934 529.537 Z" style="fill: rgb(169, 72, 53);"/>
    <path d="M 1340.746 527.008 L 1348.935 526.527 L 1349.295 528.334 L 1340.986 527.973 L 1340.746 527.008 Z" style="fill: rgb(144, 58, 40);"/>
    <path d="M 1341.537 533.866 L 1349.726 533.385 L 1350.086 535.192 L 1341.777 534.831 L 1341.537 533.866 Z" style="fill: rgb(144, 58, 40);"/>
    <line style="fill: rgb(216, 216, 216); stroke: rgb(144, 58, 40);" x1="1341.897" y1="527.483" x2="1349.227" y2="534.452"/>
  </g>
  <g transform="matrix(0.722973, 0, 0, 0.722973, 499.850403, 141.451859)" style="" >
    <g transform="matrix(1, 0, 0, 1, -6.706936, 2.155802)">
      <line style="fill: rgb(216, 216, 216); stroke: rgb(169, 169, 169); stroke-linecap: square; stroke-width: 3px;" x1="1377.406" y1="364.163" x2="1389.153" y2="358.297"/>
      <ellipse style="fill: rgb(151, 151, 151);" cx="1376.922" cy="364.771" rx="6.532" ry="6.532"/>
    </g>
    <g transform="matrix(-1, 0, 0, 1, 2496.178223, -2.457399)">
      <line style="fill: rgb(216, 216, 216); stroke: rgb(169, 169, 169); stroke-linecap: square; stroke-width: 3px;" x1="1377.406" y1="364.163" x2="1389.153" y2="358.297"/>
      <ellipse style="fill: rgb(151, 151, 151);" cx="1376.922" cy="364.771" rx="6.532" ry="6.532"/>
    </g>
    <g>
      <path d="M 1211.97 407.858 L 1452.449 362.44 L 1442.552 403.2 C 1442.552 403.2 1454.779 450.498 1454.779 441.63 L 1211.97 407.858 Z" style="fill: rgb(175, 173, 151);"/>
      <ellipse style="fill: rgb(166, 144, 124);" cx="1190.13" cy="446.2" rx="24.085" ry="15.104" transform="matrix(0.957944, -0.286955, 0.286955, 0.957944, -112.276604, 355.380528)"/>
      <path d="M 1102.836 363.395 L 1158.72 359.961 L 1253.038 357.961 L 1346.867 362.903 L 1403.434 371.237 L 1430.886 392.372 L 1449.029 403.814 L 1431.039 413.571 L 1408.337 434.43 L 1348.338 442.764 L 1253.038 449.667 L 1158.72 447.667 L 1109.016 443.745 L 1072.736 424.269 L 1064.401 403.814 L 1074.535 376.989 L 1102.836 363.395 Z" style="fill: rgb(191, 189, 167);"/>
    </g>
  </g>
  <g transform="matrix(1, 0, 0, 1, -75.832329, -24.945124)" >
    <path d="M 1354.934 529.537 L 1357.574 526.214 L 1360.492 526.066 L 1359.226 533.922 L 1353.278 533.874 L 1338 534.835 L 1338.159 529.014 L 1348.377 529.006 L 1354.934 529.537 Z" style="fill: rgb(169, 72, 53);"/>
    <path d="M 1340.746 527.008 L 1348.935 526.527 L 1349.295 528.334 L 1340.986 527.973 L 1340.746 527.008 Z" style="fill: rgb(144, 58, 40);"/>
    <path d="M 1341.537 533.866 L 1349.726 533.385 L 1350.086 535.192 L 1341.777 534.831 L 1341.537 533.866 Z" style="fill: rgb(144, 58, 40);"/>
    <line style="fill: rgb(216, 216, 216); stroke: rgb(144, 58, 40);" x1="1341.897" y1="527.483" x2="1349.227" y2="534.452"/>
  </g>
  <g transform="matrix(1, 0, 0, 1, 0, 2.32215)" >
    <path d="M 1469.663 353.282 L 1472.303 349.959 L 1475.221 349.811 L 1473.955 357.667 L 1468.007 357.619 L 1452.729 358.58 L 1452.888 352.759 L 1463.106 352.751 L 1469.663 353.282 Z" style="fill: rgb(79, 131, 148);"/>
    <path d="M 1455.475 350.753 L 1463.664 350.272 L 1464.024 352.079 L 1455.715 351.718 L 1455.475 350.753 Z" style="fill: rgb(61, 112, 134);"/>
    <path d="M 1456.266 357.611 L 1464.455 357.13 L 1464.815 358.937 L 1456.506 358.576 L 1456.266 357.611 Z" style="fill: rgb(61, 112, 134);"/>
    <line style="fill: rgb(216, 216, 216); stroke: rgb(61, 112, 134);" x1="1456.626" y1="351.228" x2="1463.956" y2="358.197"/>
  </g>
  <g >
    <path d="M 1562.51 510.091 L 1565.15 506.768 L 1568.068 506.62 L 1566.802 514.476 L 1560.854 514.428 L 1545.576 515.389 L 1545.735 509.568 L 1555.953 509.56 L 1562.51 510.091 Z" style="fill: rgb(68, 120, 39);"/>
    <path d="M 1548.322 507.562 L 1556.511 507.081 L 1556.871 508.888 L 1548.562 508.527 L 1548.322 507.562 Z" style="fill: rgb(65, 105, 39);"/>
    <path d="M 1549.113 514.42 L 1557.302 513.939 L 1557.662 515.746 L 1549.353 515.385 L 1549.113 514.42 Z" style="fill: rgb(65, 105, 39);"/>
    <line style="fill: rgb(65, 105, 39); stroke: rgb(65, 105, 39);" x1="1549.473" y1="508.036" x2="1556.803" y2="515.006"/>
  </g>
         <g transform="matrix(-0.743218, 0, 0, 0.51047, 2022.434814, 358.08783)" style="" >
    <ellipse style="fill: rgb(255, 196, 95);" cx="59.317" cy="736.643" rx="588.238" ry="56.671"/>
    <path d="M 68.983 677.856 C 317.285 677.856 529.655 694.235 615.971 717.398 L -478.005 717.398 C -391.689 694.235 -179.319 677.856 68.983 677.856 Z" style="fill: rgb(135, 114, 65);"/>
    <path d="M 36.49 676.716 C 290.862 676.716 507.523 691.055 589.581 711.129 L -516.601 711.129 C -434.543 691.055 -217.882 676.716 36.49 676.716 Z" style="fill: rgb(86, 159, 79);"/>
  </g>
 </g>
<g id="SvgLayer1">
  <g class="SvgLayer1">
     <path d="M 108.701 700.726 L 289.861 695.698 L 274.511 659.722 L 253.625 612.118 L 224.226 591.592 L 191.607 607.838 L 146.609 617.895 L 119.532 653.507 L 108.701 700.726 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />
    <ellipse style="fill: rgb(255, 196, 95);" cx="59.317" cy="736.643" rx="588.238" ry="56.671"/>
    <path d="M 68.983 677.856 C 317.285 677.856 529.655 694.235 615.971 717.398 L -478.005 717.398 C -391.689 694.235 -179.319 677.856 68.983 677.856 Z" style="fill: rgb(135, 114, 65);"/>
    <path d="M 36.49 676.716 C 290.862 676.716 507.523 691.055 589.581 711.129 L -516.601 711.129 C -434.543 691.055 -217.882 676.716 36.49 676.716 Z" style="fill: rgb(86, 159, 79);"/>
  </g>

  <path d="M 526.269 717.628 L 558.888 723.431 L 586.864 717.628 L 585.318 680.081 L 576.034 642.535 L 564.304 640.213 L 548.704 658.007 L 531.684 688.977 L 526.269 717.628 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />
  <path d="M 496.685 717.187 L 519.247 724.537 L 537.165 718.734 L 544.13 681.961 L 526.335 671.492 L 520.794 663.755 L 509.063 666.849 L 499.779 686.215 L 496.685 717.187 Z" style="stroke-width: 3px; fill: rgb(58, 58, 58);" />
  <path d="M 2.71 693.935 L 50.029 698.19 L 86.515 691.613 L 74.912 655.614 L 57.117 645.145 L 40.745 619.614 L 23.599 625.802 L 8.899 656 L 2.71 693.935 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />
      <rect width="1920" height="355.97" style="fill: rgb(40, 121, 173); stroke-linecap: round; stroke-width: 11px;" y="730.695"/>
  <path d="M 216.237 767.922 L 320.805 770.053 L 301.662 740.964 L 296.277 729.012 L 285.574 725.989 L 263.112 727.837 L 244.538 707.29 L 222.284 713.151 L 216.237 767.922 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;" />

</g>
  <path d="M 1030.605 745.571 L 1148.365 746.053 L 1141.59 708.718 L 1127.135 695.942 L 1104.064 658.289 L 1084.901 637.051 L 1053.134 654.432 L 1039.95 694.923 L 1030.605 745.571 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;"/>
  <path d="M 939.084 753.187 L 1086.554 752.569 L 1066.574 708.632 L 1043.316 689.253 L 1005.941 678.009 L 997.781 661.172 L 974.817 684.055 L 964.934 715.743 L 939.084 753.187 Z" style="stroke-width: 3px; fill: rgb(53, 53, 53);" />

  <g id="SvgLayers3" transform="translate(0,0)">
    <g>
      <path d="M 608.626 839.935 L 619.032 856.479 L 623.002 890.027 L 613.208 874.617 L 608.626 839.935 Z" style="fill: rgb(30, 22, 7);"/>
      <path d="M 618.059 856.165 L 726.839 861.021 L 724.223 895.923 L 622.466 889.958 L 618.059 856.165 Z" style="fill: rgb(52, 43, 24);"/>
      <path d="M 726.839 861.022 L 816.389 824.281 L 777.383 873.394 L 722.892 896.646 L 726.839 861.022 Z" style="fill: rgb(62, 51, 28);"/>
      <path d="M 608.046 840.466 L 693.752 822.501 L 816.782 824.681 L 766.399 845.678 L 725.812 862.18 L 671.601 859.771 L 617.834 856.917 L 612.94 848.248 L 608.046 840.466 Z" style="fill: rgb(42, 32, 12);"/>
    </g>
    <g transform="matrix(1, 0, 0, 1, 42.91605, -80.013588)">
      <ellipse style="fill: rgb(80, 80, 80);" cx="670.495" cy="919.504" rx="38.336" ry="10.365"/>
      <line style="fill: rgb(216, 216, 216); stroke-linecap: round; stroke-width: 11px; stroke: rgb(160, 160, 160);" x1="681.944" y1="904.281" x2="716.448" y2="890.205"/>
      <path d="M 670.446 927.77 C 654.695 927.77 641.698 924.607 639.807 920.52 C 639.787 920.07 639.777 919.618 639.777 919.163 C 639.777 902.263 653.477 888.563 670.377 888.563 C 687.277 888.563 700.977 902.263 700.977 919.163 C 700.977 919.715 700.962 920.263 700.934 920.807 C 698.581 924.754 685.827 927.77 670.446 927.77 Z" style="fill: rgb(126, 126, 126);"/>
    </g>
  </g>

  <g id="SvgLayers4">
  <path d="M 1173.047 979.997 L 1686.581 1042.238 L 2171.141 1180.087 L 2095.385 1401.361 L 1173.047 979.997 Z" style="fill: rgb(255, 196, 95);" transform="matrix(0.910945, -0.412528, -0.006126, 1.100535, 144.40802, 495.495453)" />
  <path d="M 1070.01 1142.604 L 1441.902 1129.489 L 1347.842 990.758 L 1279.098 759.577 L 1218.295 733.783 L 1201.416 852.57 L 1133.945 873.884 L 1118.061 986.381 L 1070.01 1142.604 Z" style="fill: rgb(69, 69, 69); stroke-width: 3px;"/>
  <path d="M 1402.406 970.002 L 1887.335 1032.243 L 2160.093 1126.669 L 2131.093 1391.366 L 1402.406 970.002 Z" style="fill: rgb(135, 114, 65);" transform="matrix(0.910945, -0.412528, 0.412528, 0.910945, -328.435852, 839.960999)" />
  <path d="M 1450.586 979.404 L 1935.515 1041.645 L 2208.273 1136.071 L 2179.273 1400.768 L 1450.586 979.404 Z" style="fill: rgb(86, 159, 79);" transform="matrix(0.910945, -0.412528, 0.412528, 0.910945, -328.023804, 860.673889)" />
  </g>
  <script>
  // <![CDATA[
    let svg = document.querySelector("svg");

    let w = svg.clientWidth;
    let h = svg.clientHeight;
    let x = 0;
    let y = 0;
    let l0 = svg.getElementById("SvgLayer0");
    let l1 = svg.getElementById("SvgLayer1");
    let l2 = svg.getElementById("SvgLayer2");
    let l3 = svg.getElementById("SvgLayers3");
    let l4 = svg.getElementById("SvgLayers4");
    document.addEventListener("mousemove", onMouseUpdate);
    document.addEventListener("mouseenter", onMouseUpdate);
    function onMouseUpdate(ev) {
      x = ev.pageX;
      y = ev.pageY;
      l0.style.transform = `translateX(${(x - w / 2) / 32}px)`;
      l1.style.transform = `translateX(${(x - w / 2) / 16}px)`;
      // l2.style.transform = `translateX(${(x - w / 2) / 8}px)`;
      l3.style.transform = `translateX(${(x - w / 2) / 4}px)`;
      l4.style.transform = `translateX(${(x - w / 2) / 2}px)`;
    }
  // ]]>
  </script>
</svg>

Анимирование позиций SVG элементов через JS

Ответы