在 Aurelia 中访问 SVG 组件的尺寸答案

【问题标题】：Accessing dimensions of SVG component in Aurelia在 Aurelia 中访问 SVG 组件的尺寸
【发布时间】：2016-10-26 20:51:49
【问题描述】：

我正在将一个 d3 应用程序移植到 Aurelia 中，并且需要访问图表的 SVG 父级的宽度和高度，以便使图表正确地适应当前的屏幕尺寸。

在移植之前，它看起来像这样，正确地填满了整个容器：

这就是它在 Aurelia 中的样子：

它通过调用d3.select('#timeline-svg').style('width') 和d3.select('#timeline-svg').style('height') 来设置它的尺寸。但是现在，在 Aurelia 中，无论何时我调用它们，它都会返回 300 x 150 的尺寸，无论 SVG 的实际尺寸是多少。我尝试在 SVG 的 div 父级（具有相同的尺寸）上调用相同的代码，但这也没有帮助。

然后我想尝试双向数据绑定并将我的 SVG 标记更改为 <svg id="timeline-svg" width.two-way="width"></svg>（并在我的视图模型中声明了相应的 width 变量），但我收到错误：Error: Observation of a "svg" element's "width" property is not supported.

我什至尝试过使用aurelia-pal，将其注入为DOM 并调用：

attached() {console.log(this.DOM.getElementById("timeline-svg").style.width);} 但给我的只是一个空字符串。

有一个要点here（减去 d3 代码，但我想弄清楚的是如何从 app.js 中访问 app.html 中 SVG 元素的尺寸）。我究竟做错了什么？谢谢！

【问题讨论】：

当你调用 getElementById 时你几乎肯定不想要#
感谢您的关注。这解决了 TypeError，但现在该日志语句只返回一个空字符串。

标签： d3.js aurelia

【解决方案1】：

我不确定这是否正是您要查找的内容，但您可以使用 ref 自定义属性来获取 svg 元素本身的引用。

<svg ref="svgElement"></svg>

然后使用getBBox() 函数。该函数的结果将具有您可以使用的width 属性。

this.svgElement.getBBox().width

这是一个简单的要点示例：https://gist.run/?id=0ed86f511533512a22d002675221d812

【讨论】：

谢谢，刚刚尝试过，它会打印出BBox SVGRect { x: 0, y: 0, width: 0, height: 0 }，尽管我在从 SVG 中渲染绘图本身之后从attached() 调用了日志语句（这意味着 SVG 不可能那时的尺寸为 0x0）。我不明白。这一定是我不理解的特定于 Aurelia 的问题。
您介意创建一个显示问题的要点示例吗？我会试着找出问题所在。
谢谢，非常感谢您的提议！我整理了一个最小的示例要点here。它不涉及任何 d3，因为这实际上与它无关。我要做的就是找出如何从我的 app.js 类中访问 app.html 中单个 SVG 元素（布局左下角的白框）的尺寸。
您需要在 SVG 元素中包含内容，然后它的边界框才会报告任何大小：gist.run/?id=c303fa0f0516cade76e5108bfc69c59e
但正如this gist 所示，当不使用Aurelia 时，我可以很好地找到空SVG 的尺寸。但是，当运行（在我看来）与 Aurelia 内（this gist）中完全相同的代码时，返回的尺寸始终为 300x150，无论您将窗口（以及因此 SVG）调整为什么大小。