可缩放至容器的SVG

Question

我想创建一个SVG，它可以缩放到容器的宽度，而没有调整其大小或变形的部分。因此，根据宽度，相同的图像可能会与以下任意图像一起呈现：

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

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

可能的解决方案：

• 多个对象：从重叠部分中构造形状是一种选择，但可能会出现混乱的重叠伪像。

• 图像交换：我不想构造这些大小的固定数量，因为我无法预期所有可能的屏幕，窗口或设备大小。相反，我希望图像可以缩放到任何大小。

• JavaScript：我真的希望避免这种情况，因为它需要放置SVG的每个页面或上下文来运行脚本来对其进行修复。

Answer 1

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

<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>