带有设置了SVG高度和宽度属性的viewBox属性

Question

如果您查看具有宽度和高度属性以及viewBox属性设置的此jsbin 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根本不会缩放。

但是，如果我注释掉宽度和高度属性，那么它似乎会像这个bin中的那样缩放。

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

我也对viewBox的宽度和高度属性实际上对应于实际空间感到困惑。

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

- dagda1

---

可能是svg viewBox属性的重复问题。 - Eric Guan

Answer 1

< p > < em > < code > tl;dr: viewBox 用于绘制SVG内部的内容， width 和 height 告诉显示它的大小。

viewBox定义了您将SVG绘制到其中的画布和坐标系。 如果它说 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属性。此算法的描述在这里。 （请注意，在本示例中使用的<svg>元素中，x和y属性必须始终为0。）

- ccprog