内联 SVG 的内在比率

Posted 2023-02-27

【中文标题】内联 SVG 的内在比率

【英文标题】：Intrinsic ratio for an inline SVG

【发布时间】：2014-12-23 11:12:05

【问题描述】：

我正在用 JS 构建一个内联 SVG。 SVG 的比例（又称比例）是动态的：随时可以从 JS 中更改。

我想让 SVG 具有响应性。这就是我使用<img> 的方式：

img 
  width: 100%;
  height: auto;

但这不适用于<svg>。小提琴：http://jsbin.com/vobaq/1/edit?html,css,output

目标是缩放内联 SVG 元素以在不扭曲其比例的情况下水平适应容器。 CSS 不应该知道当前的 SVG 比例。

【问题讨论】：

谢谢罗伯特，我想通了，见下文。

【参考方案1】：

解决方案是使用viewbox 属性而不是width 和height。那你甚至不需要 CSS width: 100%; height: auto;！

演示：http://jsbin.com/vobaq/4/edit?html,css,output