如何避免 SVG 在其容器缩小时缩放？

Question

我希望 SVG 在其容器缩小时不缩放。在滚动时，我的容器缩小了它的高度（它的宽度保持不变）。该容器包含一个 SVG，我想不缩放，而是让它的下部 invisible/cut 关闭。

如果我（通过 CSS）使用我的 SVG 作为背景，我可以做到这一点，但我更愿意在 HTML.

中内嵌 SVG

我已尝试使用 SVG 属性的各种值 preserveAspectRatio。我认为值 xMidYMin slice 会切掉我的 SVG 的底部（就像我想要的那样），但它会压缩它的高度。

我的容器是 245x80 像素，滚动时缩小到 245x40 像素。

我的 svg 元素的属性 viewBox 设置为 0 0 245 80 ，并且没有明确定义 width 或 height。

Answer 1

您可以对 svg 元素使用 preserveAspectRatio="xMidYMin slice"。

请注意 svg 元素有一个 viewBox 以及宽度和高度。虽然 viewBox 的纵横比为 1:1，但宽度和高度的纵横比为 2:1

xMidYMin - Force uniform scaling.
Align the midpoint X value of the element's viewBox with the midpoint X value of the viewport.
Align the of the element's viewBox with the smallest Y value of the viewport.

slice - Scale the graphic such that: the aspect ratio is preserved and the entire viewport is covered by the viewBox

请详细阅读 preserveAspectRatio

在下一个演示中使用滑块更改 svg 元素的高度

itr.addEventListener("input",()=>{svg.setAttribute("height",itr.value)})

svg{border:solid}

<p><input id="itr" type="range" min="10" max="200" value="100"/></p>
<svg preserveAspectRatio="xMidYMin slice" viewBox="0 0 100 100" width="200" height="100" id="svg">
  <defs>
    <path style="fill:gold; stroke:black; stroke-width: 8px;
    stroke-linecap: round; stroke-linejoin: round;" id="smiley" d="M50,10 A40,40,1,1,1,50,90 A40,40,1,1,1,50,10 M30,40 Q36,35,42,40 M58,40 Q64,35,70,40 M30,60 Q50,75,70,60 Q50,75,30,60" />
  </defs>

  <use href="#smiley" />
</svg>

如何避免 SVG 在其容器缩小时缩放？

How avoid SVG from scaling as its container shrinks?

svg

scale