缩放到容器的 SVG

Question

我想创建一个 SVG，它可以缩放到容器的宽度而不它的某些部分会调整大小或扭曲。因此，根据宽度，同一图像可能呈现为以下任何一种：

如您所见，左右部分是（或至少看起来是）同一路径的一部分，并且在所有情况下它们的大小和纵横比都相同。

似乎 SVG 的功能应该允许这样做，但我不知道如何做到。显然没有图形程序会这样做，所以 SVG 需要手工制作。

可能的解决方案：

多个对象：用重叠部分构造形状是一种选择，但存在重叠伪像杂乱的风险。
图像交换：我不想构建固定数量的这些尺寸，因为我无法预测每个可能的屏幕、window 或设备尺寸。相反，我想要一个可以缩放到任何大小的图像。
JavaScript：我真的很想避免这种情况，因为它需要将 SVG 放入的每个页面或上下文运行一个脚本来修复它。

Answer 1

如果只有部分要放置在两侧，则可以利用嵌套 <svg> 元素的 preserveAspectRatio 属性。

<svg width="100%" height="50px">
  <rect fill="grey" width="100%" height="100%" />
  <svg width="100%" height="100%" viewBox="0 0 50 50" preserveAspectRatio="xMinYMid meet">
    <circle fill="white" cx="25" cy="25" r="18" />
  </svg>
  <svg width="100%" height="100%" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMid meet">
    <circle fill="white" cx="25" cy="25" r="18" />
  </svg>
</svg>

如果您使用进一步的嵌套级别和定位技巧，四个角同样适用：

body { height: 90vh; }

<svg width="100%" height="100%">
  <rect fill="grey" width="100%" height="100%" />
  <svg width="100%" height="50">
    <svg width="100%" height="100%" viewBox="0 0 50 50" preserveAspectRatio="xMinYMid meet">
      <circle fill="white" cx="25" cy="25" r="18" />
    </svg>
    <svg width="100%" height="100%" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMid meet">
      <circle fill="white" cx="25" cy="25" r="18" />
    </svg>
  </svg>
  <svg width="100%" height="50" y="100%" transform="translate(0 -50)">
    <svg width="100%" height="100%" viewBox="0 0 50 50" preserveAspectRatio="xMinYMid meet">
      <circle fill="white" cx="25" cy="25" r="18" />
    </svg>
    <svg width="100%" height="100%" viewBox="0 0 50 50" preserveAspectRatio="xMaxYMid meet">
      <circle fill="white" cx="25" cy="25" r="18" />
    </svg>
  </svg>
</svg>

缩放到容器的 SVG

SVG that scales to the container

svg

responsive-images