Javascript <；g>；元素不适用于<；svg>；在Firefox上

使用ES6'ish D3js模块运行Angular 6应用程序会导致Firefox出现问题（Chrome、Chrome、Safari和IE Edge运行正常）。伪代码看起来与之类似（生产代码可以在下面找到）：

---

为

s获得正确的尺寸始终是一个有趣的话题

总之，我刚刚搜索了SVG的相关维度问题，发现了以下Firefox错误：

这反过来又指（通过评论）明确说明以下内容：

如果元素没有关联的CSS布局框，或者CSS布局框是内联的，则返回零

我不确定Chrome如何分配正确的维度（我从未调试过），但Firefox遵循上述规则

Firefox针对

getBoundingClientRect

提出了另一个具有类似维度问题的主要错误，该错误用于输出0（与

clientHeight/clientWidth

相同），但已修复：

因此，为了修复您的代码/库并使其适用于Firefox，我提出了一些简单的方法：

方法1:

当您将CSS

width:100%

和

height:100%

添加到

的父对象时，您可以将

this.canvas.clientWidth

替换为

（this.canvas.clientWidth | this.canvas.parentNode.clientWidth）

和

this.canvas.clientHeight

（this.canvas.clientHeight | | this.canvas.parentNode.clientHeight）在updateMatrix方法中

例如：

const totalArea = Math.abs((this.canvas.clientWidth || this.canvas.parentNode.clientWidth) * (this.canvas.clientHeight || this.canvas.parentNode.clientHeight));
const totalCenter = this.math.centerOfArea((this.canvas.clientWidth || this.canvas.parentNode.clientWidth), (this.canvas.clientHeight || this.canvas.parentNode.clientHeight));

或者您可以将它们设置为常量。这是您的选择。我看到只有两行-都在updateMatrix方法中。如果

svg

具有某些边距、边框等，这种方法可能会出问题

方法2:

正如我前面提到的关于

getBoundingClientRect

的bug，现在已经在Firefox中修复，您可以通过以下方式使用它：

比如说,

const totalArea = Math.abs(this.canvas.getBoundingClientRect().width * this.canvas.getBoundingClientRect().height);
const totalCenter = this.math.centerOfArea(this.canvas.getBoundingClientRect().width, this.canvas.getBoundingClientRect().height);

或者将它们设置为常量。同样，这是您的选择

通过在控制台中重写，我尝试了上述两种方法，似乎效果不错

下面是一个通过控制台使用不同方法记录维度来解决问题的小把戏。请尝试不同的浏览器：

片段：

$（函数（）{
var svg=document.getElementById（'foo'）；
log（svg.clientWidth、svg.clientHeight）；
log（svg.parentNode.clientWidth、svg.parentNode.clientHeight）；
log（svg.getBoundingClientRect（）.width，svg.getBoundingClientRect（）.height）；
log（svg.width.baseVal.value，svg.height.baseVal.value）；
})；

div{
宽度：200px；
高度：200px；
背景：#00f；
}
svg{
宽度：100%；
身高：100%；
背景：#f00；
}

A

没有您可以设置的大小，它只是有其内容元素的边界框。区别在于

元素。Chrome设置了

style=“宽度：768px；高度：199”

，而Firefox只有

style=“”

。请发布操作该元素的代码。@ccprog我刚刚完成了代码库。虽然我仍然无法真正回答，但有一个观察结果：在Firefox上，路径数据似乎从未设置为有意义的完整值。在Chrome开发工具中，我可以在每次“更新”中看到这一点单击会计算新路径，但在Firefox上，它们始终保持不变，并且大多数路径都包含除零以外的内容。部分代码似乎没有运行。请注意1.svg样式未设置（由

canvasService.adjustToWindow

完成）和2.路径数据未更新（由

GraphsComponent.updateMatrix

完成），所有内容都指向

graphComponent。ngOnChanges

未被触发。另一方面，我可以看到配置表单附带的

submit/ngSubmit

事件侦听器。因此，您的错误介于两者之间-我对Angular的了解不够，无法找到它。第二种方法为我解决了它。我没想到问题会解决在那里，你终于找到他们了。谢谢！当然。很高兴我能帮上忙！：）

const totalArea = Math.abs(this.canvas.getBoundingClientRect().width * this.canvas.getBoundingClientRect().height);
const totalCenter = this.math.centerOfArea(this.canvas.getBoundingClientRect().width, this.canvas.getBoundingClientRect().height);