Нужно чтобы SVG картинка увеличивались, уменьшались в соответствии с процентами

Question

Есть SVG изображение, оно должно увеличиваться или уменьшаться параллельно процентам, пример:

Код SVG иконки:

<svg width="200" height="15" viewBox="0 0 200 15" fill="none" xmlns="http://www.w3.org/2000/svg">       
  <path d="M194.607 1.23264C191.333 4.29896 190.201 7.04695 183.188 8.54568C174.555 10.392 165.962 5.98673 161.708 2.37471C160.24 1.12805 156.68 0.888328 155.309 2.37471C149.3 8.88999 135.991 7.29901 130.312 1.01111C128.916 -0.53569 124.195 -0.259588 123.615 1.51004C120.424 11.2573 106.096 12.2889 96.5007 5.22405C97.548 3.3219 92.0846 2.02715 90.5951 3.88903C82.5402 13.9605 66.8144 12.8353 57.6871 3.84746C56.103 2.28766 52.5542 2.83467 51.5308 4.30611C44.1129 14.9759 32.5594 9.90019 26.076 2.55597C24.8133 1.1248 21.212 1.62047 20.4508 2.97498C16.9077 9.28302 11.0705 10.4608 1.23659 12.0927C-0.615315 12.4007 -0.329268 14.2327 1.70725 14.078C12.9748 13.2218 19.1288 12.0791 23.734 7.29576C33.1953 15.7177 46.4036 17.438 55.2665 8.57622C66.7586 16.7767 85.2194 17.7115 94.3661 7.95515C104.526 15.8334 121.565 15.4455 128.388 6.8605C137.19 12.7794 150.002 13.611 158.866 6.98719C172.057 14.5477 199.036 16.2401 199.997 2.06678C200.117 0.37641 196.055 -0.124463 194.607 1.23264Z" fill="#00B2A0"/>
</svg>

Answer 1

Варианты с растровой картинкой и SVG-изображением:

document.querySelectorAll(".progress").forEach((el) => {
  el.style.cssText = `--progress-percent:${el.dataset.progressPercent}; --progress-time:${el.dataset.progressTime}; --progress-state: running;`;
});

@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap");
body {
  font-family: "Roboto Condensed", sans-serif;
}
.progress {
  display: flex;
}
.bar {
  width: 0;
  box-sizing: border-box;
  animation: progress-width var(--progress-time, 0s) ease-in forwards var(--progress-state, paused);
}
.bar > * {
  height: 38px;
  width: 100%;
  box-sizing: border-box;
}
.percent {
  position: relative;
  height: 38px;
  width: min-content;
  overflow: hidden;
  font-size: 38px;
  line-height: 1em;
  box-sizing: border-box;
}

.percent::before {
  content: " \00000a0%\00000a1%\00000a2%\00000a3%\00000a4%\00000a5%\00000a6%\00000a7%\00000a8%\00000a9%\00000a10%\00000a11%\00000a12%\00000a13%\00000a14%\00000a15%\00000a16%\00000a17%\00000a18%\00000a19%\00000a20%\00000a21%\00000a22%\00000a23%\00000a24%\00000a25%\00000a26%\00000a27%\00000a28%\00000a29%\00000a30%\00000a31%\00000a32%\00000a33%\00000a34%\00000a35%\00000a36%\00000a37%\00000a38%\00000a39%\00000a40%\00000a41%\00000a42%\00000a43%\00000a44%\00000a45%\00000a46%\00000a47%\00000a48%\00000a49%\00000a50%\00000a51%\00000a52%\00000a53%\00000a54%\00000a55%\00000a56%\00000a57%\00000a58%\00000a59%\00000a60%\00000a61%\00000a62%\00000a63%\00000a64%\00000a65%\00000a66%\00000a67%\00000a68%\00000a69%\00000a70%\00000a71%\00000a72%\00000a73%\00000a74%\00000a75%\00000a76%\00000a77%\00000a78%\00000a79%\00000a80%\00000a81%\00000a82%\00000a83%\00000a84%\00000a85%\00000a86%\00000a87%\00000a88%\00000a89%\00000a90%\00000a91%\00000a92%\00000a93%\00000a94%\00000a95%\00000a96%\00000a97%\00000a98%\00000a99%\00000a100%";
  position: relative;
  top: 0em;
  width: 100%;
  white-space: pre-wrap;
  animation: progress-value var(--progress-time, 0s) steps(calc(var(--progress-percent, 0) + 1)) forwards var(--progress-state, paused);
}
@keyframes progress-width {
  to {
    width: calc(var(--progress-percent, 0) * 1%);
  }
}
@keyframes progress-value {
  to {
    top: calc((var(--progress-percent, 0) + 1) * -1em);
  }
}

<div class="progress" data-progress-percent="20" data-progress-time="3s">
  <div class="bar">
    <svg viewBox="0 0 254.476 16.455" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1.913 12.921c0-.508.731-.762.731-.762s17.24.095 24.898-7.531c2.478-2.065 5.782-1.684 7.497-.127 1.716 1.557 9.415 6.387 18.089 6.228 8.673-.16 12.527-4.438 13.386-5.169 1.493-1.398 5.74-1.78 8.218 0 3.717 2.383 11.024 5.624 21.445 5.688 12.04.19 17.526-4.957 18.416-5.18 1.461-1.938 7.837-1.652 8.122-.698 1.05 3.272 9.627 4.904 17.316 4.967 12.04.572 14.816-4.692 17.134-6.853 2.002-2.733 7.657-1.228 8.134-.466.826.636 6.206 4.427 17.707 4.49 8.07.097 9.51-1.302 13.894-3.558 3.686-2.001 7.413.042 7.413.042s12.03 6.345 21.943 5.55c13.47.16 18.3-5.592 18.3-5.592s.445-1.313 4.702-1.567c3.368-.19 3.273 1.112 3.304 1.525-1.461 6.768-10.188 8.663-22.705 8.632-26.973-1.525-28.096-5.158-28.763-5.158-.667 0-3.908 4.353-18.269 4.194-14.296-.318-19.083-3.898-19.814-3.898-.73 0-5.782 5.688-21.286 5.847-15.313-.7-20.28-4.703-21.456-4.703-1.175 0-6.184 5.434-22.642 5.72-19.22-.064-25.522-5.455-26.411-5.423-.89.032-6.015 5.126-17.58 5.126-14.742-.445-21.371-6.26-22.07-6.228-.7.032-2.213 4.48-28.71 6.037-.159 0-.943.043-.943-1.133z" fill="#00b3a0" fill-rule="evenodd" />
    </svg>
  </div>
  <div class="percent"></div>
</div>
<p>SVG</p>

<div class="progress" data-progress-percent="10" data-progress-time="3s">
  <div class="bar">
    <img src="https://i.stack.imgur.com/WD6BJ.png">
  </div>
  <div class="percent"></div>
</div>
<p>IMG</p>

Answer 2

Чтобы изображение растягивалось, необходимо изменять width в шапке svg файла и добавить preserveAspectRatio="none", которое не учитывает пропорциональное соотношение ширины и высоты при изменении одного из параметров. То есть при одной и той же высоте волны, ширина её может быть разной.

Так как одно и тоже изображение SVG используется несколько раз, то имеет смысл добавить его в HTML один раз - <defs> ...</defs> и затем клонировать его по id с помощью <use> в отдельных блоках SVG, которые будут иметь разную ширину.

.rect {
width:450px;
height:300px;
background-color:#EDEDED;
padding:1em;
}
.container {
display:inline;
margin-top:3em;
}
p {
color:#B8B8B8;
font-size:18px;
font-weight:500;
font-family:sans-serif;

}
span {
font-size:28px;
font-weight:500;
font-family:sans-serif;
}

<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" width="0" height="0" >
  <defs>
  <path id="wave" d="M194.6 1.2c-3.3 3.1-4.4 5.8-11.4 7.3a26.8 26.8 0 0 1-21.5-6.1c-1.5-1.3-5-1.5-6.4 0-6 6.5-19.3 4.9-25-1.4-1.4-1.5-6.1-1.3-6.7.5-3.2 9.8-17.5 10.8-27.1 3.7 1-1.9-4.4-3.2-5.9-1.3-8 10-23.8 9-33 0-1.5-1.6-5-1-6 .4C44 15 32.5 10 26 2.6c-1.3-1.5-4.9-1-5.6.4-3.6 6.3-9.4 7.5-19.3 9-1.8.4-1.5 2.2.5 2 11.3-.8 17.4-2 22-6.7 9.5 8.4 22.7 10.1 31.6 1.3 11.5 8.2 30 9.1 39-.6 10.2 7.8 27.3 7.4 34-1.1a27 27 0 0 0 30.6 0C172 14.6 199 16.3 200 2.2c.1-1.7-4-2.2-5.4-.9Z" fill="#00B2A0"/>
  </defs> 
  
</svg> 
<div class="rect">
<div class="container">
    <svg width="200" viewBox="0 0 200 15"> 
      <use xlink:href="#wave" width="200" />
    </svg> 
    <span>&nbsp; 85%</span> 
    <p> Приехали второй раз </p>
</div> 
  <div class="container">
    <svg width="270" viewBox="0 0 200 15"> 
      <use xlink:href="#wave" width="200" />
    </svg> 
    <span>&nbsp; 95%</span> 
    <p> Научились кататься </p>
  </div> 
<div class="container">
    <svg width="350" preserveAspectRatio="none" viewBox="0 0 200 15"> 
      <use xlink:href="#wave" width="200" />
    </svg> 
    <span>&nbsp; 99%</span> 
    <p> Довольных клиентов </p>
</div>  
</div>

БЛОГ НА HUSL

Нужно чтобы SVG картинка увеличивались, уменьшались в соответствии с процентами

Ответы (2 шт):