Как при наведении на SVG изменить размеры? (удлинить или укоротить линию)?

Question

[ByJumping]

Всем привет, есть такая СВГешка



При наведении нужно укоротить линию, что бы стало вот так -



Я на эту линию навесил класс и при наведении -

.anim {
    transform-box: fill-box;
    transform-origin: center center;
    transform: scale(0.7);
      }

Линия становится меньше, но и сами стрелочки становятся меньше. А мне нужно просто длинну изменить, не меняя ни чего остального, ни ширины, ни другие элементы, просто нужно укоротить))

вот сам код, помогите плиз

https://codepen.io/ByJumping/pen/eYLBJGM

Answer 1

[TtT RrR]

Обернул линейку в тег с классом anim и уменьшается только линейка

<svg width="180" height="167" viewBox="0 0 180 167" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g class="anim">
  <path d="M126.203 63.7572C125.248 61.6869 126.152 59.2354 128.221 58.2805C130.291 57.3259 132.743 58.2294 133.699 60.2992C134.653 62.3675 133.749 64.8206 131.679 65.7747C129.609 66.7301 127.157 65.8262 126.203 63.7572ZM134.821 41.2773L29.8982 89.778L43.9743 120.291L148.895 71.7904L134.821 41.2773Z" fill="#3FD6B2" />
  <path d="M107.737 72.5025C107.452 71.8852 106.722 71.6157 106.106 71.8994C105.489 72.1851 105.22 72.915 105.505 73.5314L112.456 88.6021L114.689 87.5724L107.737 72.5025Z" fill="#0F0F0F" />
  <path d="M101.155 82.7588C100.87 82.1424 100.139 81.8741 99.5237 82.1573C98.907 82.4435 98.6369 83.1731 98.9218 83.7895L103.127 92.9054L105.362 91.8751L101.155 82.7588Z" fill="#0F0F0F" />
  <path d="M91.8249 87.0627C91.5399 86.4463 90.8108 86.1765 90.194 86.4611C89.576 86.7462 89.3067 87.4757 89.5917 88.0929L93.7977 97.2088L96.0308 96.1786L91.8249 87.0627Z" fill="#0F0F0F" />
  <path d="M82.4967 91.3649C82.2127 90.7492 81.482 90.4797 80.8656 90.7646C80.2484 91.0496 79.9795 91.7786 80.2644 92.395L84.4689 101.512L86.702 100.482L82.4967 91.3649Z" fill="#0F0F0F" />
  <path d="M70.4208 89.7151C70.1362 89.0983 69.4055 88.8287 68.789 89.1129C68.1723 89.3982 67.9031 90.1285 68.1872 90.7449L75.14 105.815L77.3727 104.785L70.4208 89.7151Z" fill="#0F0F0F" />
  <path d="M63.8396 99.9729C63.5555 99.3564 62.8252 99.0872 62.208 99.3714C61.5924 99.6563 61.3232 100.387 61.6077 101.003L65.8133 110.119L68.0449 109.09L63.8396 99.9729Z" fill="#0F0F0F" />
  <path d="M54.5103 104.276C54.2254 103.66 53.4956 103.391 52.8791 103.675C52.2622 103.959 51.9926 104.69 52.2775 105.306L56.4836 114.423L58.7159 113.393L54.5103 104.276Z" fill="#0F0F0F" />
  <path d="M45.1819 108.58C44.8974 107.964 44.1679 107.695 43.5498 107.979C42.935 108.263 42.6643 108.994 42.9503 109.61L47.1552 118.726L49.3863 117.697L45.1819 108.58Z" fill="#0F0F0F" />
    </g>
  <path d="M147.1 98.2161C147.619 98.4051 147.886 98.9791 147.697 99.498L144.617 107.954C144.428 108.473 143.854 108.741 143.335 108.552C142.816 108.363 142.548 107.789 142.737 107.27L145.476 99.753L137.959 97.0148C137.44 96.8257 137.173 96.2518 137.362 95.7329C137.551 95.2139 138.125 94.9465 138.644 95.1356L147.1 98.2161ZM66.1572 137.493C65.6383 137.304 65.3708 136.73 65.5599 136.211L68.6404 127.755C68.8295 127.236 69.4034 126.968 69.9223 127.157C70.4412 127.346 70.7087 127.92 70.5196 128.439L67.7813 135.956L75.2981 138.694C75.8171 138.883 76.0845 139.457 75.8954 139.976C75.7064 140.495 75.1325 140.763 74.6136 140.574L66.1572 137.493ZM147.18 100.062L66.9218 137.46L66.0771 135.647L146.335 98.2493L147.18 100.062Z" fill="#E8ECEF" />
  <path d="M133.5 34V21" stroke="#0F0F0F" stroke-width="2" stroke-linecap="round" />
  <path d="M138 35L142 27" stroke="#0F0F0F" stroke-width="2" stroke-linecap="round" />
  <path d="M141 38.5L154 30" stroke="#0F0F0F" stroke-width="2" stroke-linecap="round" />
</svg>

Comments

[ByJumping]

да, это то о чем я писал, она уменьшается вся) Но нельзя сказать что здесь ты укоротил линейку, просто размер уменьшается. А мне именно нужно чтоб только длинна уменьшалась. Сейчас уменьшается все пропорционально, то есть сами штрихи на линейке тоже меньше становятся, а они должны оставаться прежними

[TtT RrR]

тогда тебе нужно почитать про svg анимацию. по-моему без js не обойтись

или я дурачок