d3.js - 设置了 svg 高度和宽度属性的 viewBox 属性

Question

如果你看 this jsbin具有宽度和高度属性以及 viewBox 属性集的 svg 图像:

var width = width + margin.left + margin.right;
var height = height + margin.top + margin.bottom;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr('viewBox', '0 0 ' + width + ' ' + height)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然后 svg 根本不缩放。

但是如果我然后注释掉 width 和 height 属性，那么它看起来确实像 this bin 那样缩放。 .

我对 viewBox 属性感到非常困惑，我在网上看到很多示例都设置了宽度、高度和 viewBox 属性。当有宽度和高度属性时，我看到 viewBox 属性被否定。

我也很疑惑viewBox的width和height属性居然对应了实际的空间。

文档说您正在指定自己的坐标系，但我不明白这意味着什么以及宽度和高度如何对应于文档的实际宽度和高度。

Answer 1

tl;dr: viewBox用于绘制 SVG 内部的内容，width和 height告诉以什么尺寸显示它。

viewBox 定义了要在其中绘制 SVG 的 Canvas 和坐标系。如果它说 viewBox="10 50 100 100" ，并且您想绘制一个覆盖图像左上四分之一的正方形，您将编写:

<svg viewBox="10 50 100 100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="50" width="50" height="50" />
</svg>

然后，当您想要显示 SVG 时，例如嵌入到 html 页面中时，宽度和高度告诉以什么尺寸显示它们，就像您对图像标签所做的一样:

<div>
  <svg width="250" height="250" viewBox="10 50 100 100"
       xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="50" width="50" height="50" />
  </svg>
</div>

如果您的 SVG 已保存为外部文件 drawing.svg ，你可以表达相同的效果

<div>
  <img src="drawing.svg" width="250" height="250" />
</div>

在这两种情况下，您绘制的正方形都将覆盖图像的左上四分之一，但由于 SVG 的整体尺寸为 250px ✕ 250px，所以正方形的边长为 125px ✕ 125px。

换句话说，如果viewBox中定义的宽度为 a ，元素上定义的宽度为 b ，效果与缩放 SVG 内的所有内容(水平)相同，因子为 b / a .

(这显然引发了一个问题，当 viewBox 高度为 c ，元素高度为 d 并且比率 d / c ≠ b / a 不匹配时会发生什么？这就是 preserveAspectRatio 属性描述的内容。)

正式地，每个组合 width , height , viewBox和 preserveAspectRatio可以等价地写成 transform属性。对此的算法进行了描述 here . (请注意，对于示例中使用的 <svg> 元素， x 和 y 属性必须始终为 0。)