Question

如果查看this jsbin svg图像，该图像具有width和height属性并设置了viewBox属性：

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根本没有缩放。

但是，如果我然后注释掉宽度和高度属性，那么它看起来像this bin那样缩放。

我对viewBox属性感到非常困惑，我在网上看到很多带有宽度，高度和viewBox属性的示例。当有宽度和高度属性时，我将viewBox属性视为否定。

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

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

Answer 1

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不匹配时会发生什么？这就是{{ 1}}属性描述。）

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

svg高度和宽度属性设置为

1 个答案: