如何使 SVG 视图框作为其容器宽？答案

【问题标题】：How to make an SVG viewbox wide as its container?如何使 SVG 视图框作为其容器宽？
【发布时间】：2018-10-11 18:29:39
【问题描述】：

我正在尝试解决这个问题，但遇到了很多麻烦：

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

我怎样才能使视图框坐标在高度和宽度上拉伸 100%，跟随 svg 元素的视口坐标？

附：包装器的宽度为 100%，并且具有设定的高度。

【问题讨论】：

标签： javascript css svg viewbox

【解决方案1】：

只需从 SVG 元素中删除“高度”和“宽度”属性即可。

 <div class="wrapper">
    <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
 </div>

https://jsfiddle.net/mhcp4qpy/

SVG 有点奇怪，因为它们的缩放比例与大多数 img 元素不同。大多数人都“想多了”。

如果您希望 height 也能 100% 填充容器并且永不溢出，您可以更改 SVG 上的 'preserveAspectRatio' 属性以使其变形超出其原始纵横比。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

【讨论】：

但是，我试图让 SVG 成为“responsive”。因此，当我使用 javascript 以编程方式绘制形状时，它应该是响应式的。省略 height="100%" 和 width="100%" 会使我的 SVG 项目在调整浏览器大小时变得僵硬，而不是流畅。
你用的是什么浏览器？在我创建和链接的 JSFiddle 中，它是响应式的。你改变了 div 的宽度，svg 也随之改变。您可以拖动调整 jsfiddle 窗口的大小以进行验证。我每天在我的代码中使用 svgs，并且总是用这种方法让它们响应。或者我误解了你的意思......
也许您在 svg 元素或改变行为的包装容器上设置了一些额外的 css？在我的链接代码中，我只是将包装容器设置为位置：相对、100% 宽度和设定的高度 - 就像你在问题中描述的那样。它完全按照您的意愿工作
你是绝对正确的。我有一个特定的问题：我需要在单击两次（通过 JS 单击处理程序）时保持“像素完美”行为并在这些精确坐标上渲染一条 SVG 线，但还需要它“缩小”并让 SVG线元素响应所有浏览器尺寸。只有当我在 SVG 元素上使用 height="100%" 和 width="100%" 时，我才能获得像素完美匹配。不知何故，我看不到如何才能两全其美。
按“像素完美”。你的意思是保持原来的纵横比？