在不使用 javascript 的情况下使内联 SVG 在浏览器中响应？

Question

我一直在审查articles like this one，它们非常好，但可能过时了，我想知道在保持纵横比的同时使内联 svg 响应的简单方法是否取得了任何进展？

换句话说，如果我们在 div 容器内有 1:1 纵横比的 svg，并且容器从 400x400 像素缩小到 200x200 像素，那么视图框的宽度和高度参数会加倍。

Answer 1

我对你想要什么感到困惑。当您谈论“视图框宽度和高度参数加倍”时，我不知道您的意思是什么。也许您对viewBox 的工作方式感到困惑。

只要 SVG 有 viewBox，它就应该是响应式的。

在以下示例中，我将 SVG 放入 div 容器中，并为容器大小设置动画以模拟页面大小的变化。

#container {
  width: 200px;
  background: linen;
  animation: scale 1s alternate infinite;
}


@keyframes scale {
  from { width: 200px; }
  to   { width: 100px; }
}

<div id="container">

  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="gold"/>
    <rect x="10" y="50" width="20" height="50" fill="gold"/>
    <rect x="70" y="50" width="20" height="50" fill="gold"/>
    <circle cx="35" cy="45" r="5"/>
    <circle cx="65" cy="45" r="5"/>
  </svg>

</div>
    

但它也可以很容易地成为页面宽度的容器。尝试运行以下 sn-p。然后点击“整页”并调整浏览器窗口大小。：

#container {
  width: 100%;
  background: linen;
}

<div id="container">

  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="gold"/>
    <rect x="10" y="50" width="20" height="50" fill="gold"/>
    <rect x="70" y="50" width="20" height="50" fill="gold"/>
    <circle cx="35" cy="45" r="5"/>
    <circle cx="65" cy="45" r="5"/>
  </svg>

</div>

Answer 2

如果你不需要用css改变svg或修改它，我建议你将它用作img元素。您创建一个img 并将您的svg 的路径放在src 中。这就是我的意思：https://codepen.io/tlemaitre/pen/PBKGOo

Answer 3

我最近遇到了类似的问题，我有一个需要preserveAspectRatio="none" 的容器，以在不同的窗口大小上保持形状流畅，但里面的图像会失真。无论有没有 JS，我都没有看到任何解决这个问题的方法，所以我认为这是不可能的。