在 snapSVG 中获取 SVG 容器大小？

Question

创建 'paper' 对象后，使用 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/

Answer 1

getBBox() on a canvas returns 包含 canvas 上所有元素的边界框。由于您的 SVG 中没有元素，因此 returns 全为 0。

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

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

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

但是您也可以使用它包含的 div 来设置它的高度和宽度。为什么不能只使用 element.width() 和 element.height() ？

Answer 2

我发现 getBBox() 不适用于论文（Snap "drawing surface"），仅适用于论文中的 elements。但是 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>

在 snapSVG 中获取 SVG 容器大小？

Getting SVG container size in snapSVG?

javascript

height

width

snap.svg