Масштабируйте SVG, сохраняя некоторые точки фиксированными

Question

Я хочу отобразить фигуру svg на html-странице, где определенные точки должны иметь фиксированную позицию.

На изображениях ниже красные кружки представляют точки, которые должны сохранять свое точное положение. За зелеными точками слева и справа находятся точки, которые не зафиксированы и могут масштабироваться. Как этого достичь?

Я пробовал различные формы масштабирования, а также экспериментировал с атрибутами viewbox и preserveAspectRatio, но ни один из них не дал желаемого эффекта.

EDIT

вот определение svg. Я не уверен в порядке пунктов, но верхний левый - 13,-12. Я попытался изменить их на проценты, но в моем редакторе svg inkscape удалил точку и несколько других вокруг нее.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
  <path d="m 32.043776,21.922259 c -4.3888,32.42227 33.58333,44.38479 62.94249,61.98573 64.330284,22.939391 72.648644,69.263531 22.383804,131.433121 -25.509995,25.04202 -103.692494,7.65258 -127.798134,-15.30517 -20.8697,-57.14796 -21.34432,-171.108891 -20.66205,-174.861331 8.03521,-44.19367 13,-12 47.82864,-18.5575098 8.45282,0 15.30525,6.8523498 15.30525,15.3051598 z" fill="#f9fdfd"/>
</svg>

Answer 1

Вы не сможете сделать это очень хорошо, если «фиксированные» области находятся в центре. То есть если левые точки И правые точки нужно масштабировать. Проблема в том, что на фиксированные точки ссылаются сверху слева.

Исправлено: SVG поддерживает измерения как в процентах, так и в фиксированных единицах (px). Просто взломайте код SVG и добавьте / измените единицы измерения, где это необходимо.

Совет: переделайте изображение с окном просмотра 100px x 100px, чтобы у вас были допустимые значения для преобразования в проценты.

Answer 2

Похоже, вы ищете slice svg с preserveAspectRatio.

body {
  margin: 0;
}

#test {
  width: 100%;
  height: 100%;
  position: absolute;
}

.content {
  position: relative;
  padding: 30px;
}

<svg id="test" viewBox="-250 0 500 300" preserveAspectRatio="xMidYMin slice">
<path fill="lightgrey" d="M-250,0C-250,0,-130,35,-91,51C-52,67,-23,78,-1,81C21,84,29,78,34,81C39,84,42,86,43,105C44,124,51,133,43,136C35,139,-30,103,-38,165C-46,227,75,207,127,208C179,209,239,212,257,236C257,266,257,296,257,326C88,326,-81,326,-250,326C-250,217.333,-250,108.667,-250,0z"/>
</svg>
<div class="content">
  <h1>HTML Ipsum Presents</h1>
  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>

Answer 3

Я не совсем уверен, что понимаю вас, но, по моему мнению, в этом случае я бы анимировал атрибут viewBox и ширину.

itr.addEventListener("input",()=>{
  let val = parseInt(itr.value);
  let vb = `${-val} 50 ${2*val} 200`
  let w = 2*val;
  test.setAttributeNS(null,"viewBox",vb)
  test.setAttributeNS(null,"width",w)
})

svg {
  border: 1px solid;
  display: block;
  margin: 1em auto;
}
p {
  text-align: center;
}

<p><input id="itr" type="range" min="100" max="250" value="250" /></p>
<svg id="test" width="500" height="200" viewBox="-250 50 500 200">
<path fill="lightgrey" d="M-250,0C-250,0,-130,35,-91,51C-52,67,-23,78,-1,81C21,84,29,78,34,81C39,84,42,86,43,105C44,124,51,133,43,136C35,139,-30,103,-38,165C-46,227,75,207,127,208C179,209,239,212,257,236C257,266,257,296,257,326C88,326,-81,326,-250,326C-250,217.333,-250,108.667,-250,0z"/>
</svg>