Question

我一直在审查articles like this one那些确实不错，但可能已经过时的问题，我想知道在保持宽高比的同时使内嵌svg响应简单的方法是否取得了进展？

换句话说，如果我们在div容器中有svg，纵横比为1：1，并且容器从400x400px缩小到200x200 px，则视图框的宽度和高度参数会加倍。

Answer 1

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

Answer 2

我最近遇到了一个类似的问题，我有一个容器，该容器需要preserveAspectRatio="none"才能使形状在不同的窗口尺寸下保持流畅，但是内部图像会变形。无论有没有JS，我都没有看到解决此问题的任何方法，所以我认为这是不可能的。

Answer 3

我对您想要的东西感到困惑。当您谈论“视图框的宽度和高度参数加倍”时，我不知道您的意思。也许您对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>

但是也可以很容易地将其作为页面宽度的容器。尝试运行以下代码段。然后单击“整页”并调整浏览器窗口的大小。：

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

使内联SVG在浏览器中响应而不使用javascript？

3 个答案: