如何自动缩放 <svg> 元素和内容？（d3.js）[重复]

【问题标题】：How to auto-scale <svg> element and contents? (d3.js) [duplicate]如何自动缩放 <svg> 元素和内容？（d3.js）[重复]
【发布时间】：2014-12-02 22:32:48
【问题描述】：

是否可以在不裁剪的情况下缩放 svg 元素（以及所有 i 的内容）？我尝试将 svg 缩放到 100% 的宽度和高度，但是内容被剪裁了。

svg 是通过 d3.js 生成的

HTML

<svg>
  <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

CSS

svg {
  width: 100%;
}

【问题讨论】：

【解决方案1】：

哦，好的，我明白了：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

这意味着：宽度 = 100px，而不是 100%。 circle 属性相同，cx="50" 表示坐标 X = 50px，而不是 50%。

你可以做什么：

HTML

<svg class="scaled-svg">
  <circle cx="50%" cy="50%" r="20%" fill="red"></circle>
</svg>

CSS

.scaled-svg {
  width: 100%;
  height: auto; /* or 100% but it can break the ratio */
}

使用该代码，SVG 将

【讨论】：