如何缩放SVG以使其中绘制的内容适合容器大小？

Question

我有一个D3.js组件，它根据收到的数据动态呈现图表。我的问题是，当我收到大量数据时，我的组件会增长（我为每个可视元素预定义了大小），我不想重构我的组件并计算所有元素的大小以适应屏幕。 / p>

Answer 1

SVG属性preserveAspectRatio表示是否强制统一缩放。

xMinYMin - 强制统一缩放。 将元素的viewBox与视口的最小X值对齐。 将元素的viewBox与视口的最小Y值对齐。

<svg preserveAspectRatio="xMinYMin" viewBox="0 0 300 100"></svg>

注意viewBox而不是width和height属性。