保持某些点固定的情况下缩放SVG

Question

我希望在html页面上显示一个svg形状，其中某些点应该保持固定位置。

下面的图片中，红色圆圈表示应该保持精确位置的点。在左右两侧的绿色点之外，点不是固定的，可以进行缩放。如何实现这一点？

我尝试了各种形式的缩放，以及尝试使用viewbox和preserveAspectRatio属性进行实验，但都没有达到预期效果。

编辑

这里是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>

- slanden

---

它必须要缩放吗？还是可以遮盖它？我的理解是，您希望中心区域保持不变，而其余部分则进行缩放（裁剪）。这正确吗？ - Bryce Howitson

我认为它必须具备可扩展性。设计在移动设备上应该看起来像顶部的图像，但随着它逐渐扩展到平板电脑和桌面尺寸，它应该开始看起来更像底部的图像。 - slanden

你有实际的图片可以分享吗？我有一些想法，但它们都取决于实际缩放的内容。 - Bryce Howitson

我尝试了您下面的解决方案，但没有成功。我编辑了我的帖子以包含SVG。 - slanden

Answer 1

我不太确定我是否理解你的意思，但是在我的看法中，在这种情况下，我会动画化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>

- enxaneta

---

这基本上就是我在评论中提到的“掩码”解决方案。很好的例子！ - Bryce Howitson

Answer 2

看起来你想使用preserveAspectRatio对svg进行slice。

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>

- ksav

---

不完全正确。在您的示例中，当您垂直缩放时，可以看到中心点并未固定，它们与视口右侧之间的空间变得越来越小。 - slanden

Answer 3

如果“固定”区域位于中心，则无法很好地完成此操作。即，如果左侧点和右侧点都需要缩放。问题在于，固定点是从左上角引用的。

解决方法：SVG支持基于百分比和固定单位（px）的测量。只需打开SVG代码并在必要时添加/更改单位即可。

提示：使用100px x 100px的视口重新制作图像，以便您有有效的值可以转换为百分比。

- Bryce Howitson