在 snapSVG 中获取 SVG 容器大小？答案

【问题标题】：Getting SVG container size in snapSVG?在 snapSVG 中获取 SVG 容器大小？
【发布时间】：2017-08-19 11:28:21
【问题描述】：

使用 SnapSVG 获取“纸张”对象大小的正确方法是什么？

我的 HTML 如下所示：

<div id="myContainer" style="width: 900px; height: 100px" />

然后是 Javascript 代码：

function initViewer(elementId) {
    var element, elementRef, snap;
    elementRef = '#' + elementId;
    element = $(elementRef);
    element.append('<svg style="width: ' + element.width() + 'px; height: ' + element.height() + 'px; border: solid 1px black;"/>');
    snap = Snap(elementRef + ' svg');
    console.log(snap.getBBox());
}

我在这里观察到边界框的所有属性都为“0”，所以我不能依赖这里的边界框值。有什么方法可以做到这一点，而不必去父元素？

我真正想要的是 SVG 的宽度和高度，所以我可以为视图绘制适当大小的形状。

JS Fiddle，说明问题：https://jsfiddle.net/ajmas/kdnx2eyf/1/

【问题讨论】：

标签： javascript height width snap.svg

【解决方案1】：

画布上的

getBBox() 返回包含该画布上所有元素的边界框。由于 SVG 中没有元素，因此它返回全 0。

但 SVG 元素与任何其他 DOM 元素一样 - 您可以通过多种不同方式获取其宽度和高度。您可以通过 ID 或其他方式检索对象并使用 .offsetWidth 或 .offsetHeight。

您也可以遍历对象本身。我不知道这是否适用于所有浏览器，但如果你真的想使用 snap 对象，你可以这样做：

snap=Snap(elementRef + ' svg');
snap.node.clientHeight
snap.node.clientWidth

但是你也只是使用它所在的 div 来设置它的高度和宽度。为什么不能只使用 element.width() 和 element.height()？

【讨论】：

这不适用于全屏 SVG。它总是返回零。
不完全确定您所说的全屏是什么意思 - svg 元素是否由 css 调整大小？无论如何，其他方法在这里应该仍然有效 - 获取元素的宽度和高度或使用 window.innerWidth 和 window.innerHeight

【解决方案2】：

我发现getBBox() 不适用于纸张（Snap“绘图表面”），仅适用于纸张中的元素。但是node.clientWidth 为我工作 Snap.svg 论文。演示如下。

var paper = Snap("#mySVG");
paper.rect(0, 0, 200, 100).attr({fill : "#cde"});
//var tMessage0 = paper.getBBox().width;  // throws an error
var tMessage1 = paper.text(4, 24, "paper width = " + paper.node.clientWidth);
var tMessage2 = paper.text(4, 48, "text width = " + tMessage1.getBBox().width);

<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

<body>
  <svg id="mySVG" width="200" height="100">
  </svg>
</body>

【讨论】：