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

Question

我希望 SVG 在其容器缩小时不 缩放。在滚动时，我的容器会缩小它的高度（它的宽度保持不变）。该容器包含一个 SVG，我希望 不 对其进行缩放，而是让它的下部变得不可见/被切断。

如果我（通过 CSS）使用我的 SVG 作为背景，我可以做到，但我更喜欢在 HTML 中内嵌 SVG。

我尝试了 SVG 属性 preserveAspectRatio 的各种值。我认为xMidYMin slice 的值会切掉我的 SVG 的底部（如我所愿），但它反而压扁了它的高度。

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

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

Answer 1

您可以将preserveAspectRatio="xMidYMin slice" 用于 svg 元素。

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

xMidYMin - 强制统一缩放。
将元素 viewBox 的中点 X 值与视口的中点 X 值对齐。
将元素的 viewBox 与视口的最小 Y 值对齐。

slice - 缩放图形使得： 纵横比被保留并且 整个视口都被 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>