Javascript 当html元素嵌入SVG的外部对象时，为什么html元素的大小和位置会发生变化？

我想将Amchart3/Webix图表嵌入到SVG元素中。首先，我在SVG文档中创建了外来对象，然后设置其位置和大小。然后将Webix图表（它是类似div和canvas的html元素）附加到外部对象中。它被显示出来了，但是，图表的大小变大了。我试过amchart3，它的显示也比平时大。有什么问题

  var elem = this.el(animEl);
  var parent = elem.parentNode;
  var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', "foreignObject");
  var x = (elem.getAttribute('x'));
  var y = (elem.getAttribute('y'));
  var width = (elem.getAttribute('width'));
  var height = (elem.getAttribute('height'));

  foreignObject.setAttribute("x", x);
  foreignObject.setAttribute("y", y);
  foreignObject.setAttribute("height", height);
  foreignObject.setAttribute("width", width);

  foreignObject.appendChild(chart.getNode());
  parent.appendChild(foreignObject);

---

foreignObject中的元素可能具有默认大小，但在HTML中，它被压缩以适合其父容器。@mahan您可以通过此链接检查foreignObject参数：我刚刚创建了一个类似的项目。元素在两个位置的大小相同。改为附加

图表

。如果它不起作用，您应该包含代码的codepen/jsFiddle。这没用。@mahan首先感谢您的时间，您可以在这里找到代码：伙计们，我修好了。问题在于SVG的viewbox。实际上，我创建了新的SVG元素，然后设置它的viewbox（根据父SVG的viewbox和父SVG的高度和宽度计算）。然后将外来对象附加到我创建的SVG中，然后是外来对象。进入我的小组svg。