首页 文章

设置了svg高度和宽度属性的viewBox属性

提问于
浏览 次
1

如果您查看具有width和height属性以及viewBox属性集的this 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根本没有扩展 .

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

我对viewBox属性感到非常困惑，我在网上看到很多带有宽度，高度和viewBox属性的示例 . 当有width和height属性时，我看到viewBox属性为negated .

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

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

d3.js svg

1 回答

  • 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 ，则效果与使用 b / a 因子缩放SVG内的所有内容（水平）相同 .

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

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

    回复于

相关问题