Question

在这里，我在<foreignObject>元素的帮助下将段落放在SVG中。然后，我想获得getBoundingClientRect()的值。它会返回Chrome和Firefox浏览器的左侧，顶部等。但是在IE Edge的情况下，它返回不同的值，在IE 11中，foreignObject本身不起作用。

JavaScipt，CSS和HTML：

＆＃13;

var oForeignObject = document.getElementById("oForeignObject");
var oBoundingRectangle = oForeignObject.getBoundingClientRect();
var oDescription = document.getElementById("description");
oDescription.innerHTML = "left = " + oBoundingRectangle.left + " top = " + oBoundingRectangle.top;

＆＃13;

#oSvg {
  border : solid 1px black;
}

＆＃13;

<html>
  <head>
    <title>SVG ForeignObject</title>
  </head>
  <body>
    <svg xmlns = "http://www.w3.org/2000/svg" id = "oSvg" width = "500" height = "300">
      <foreignObject id = "oForeignObject" x = "100" y = "100" width = "100" height = "100">
        <p style = "border : solid 1px black;">
          Hello World
        </p>
      </foreignObject>
    </svg>
    <div id = "description">
    </div>
  </body>
</html>

＆＃13;

以下是jsfiddle：

https://jsfiddle.net/ygtLz6wk/15/

请在IE边缘和不同浏览器上查看此链接。

getBoundingClientRect（）在IE边缘浏览器中为svg foreignObject返回不同的值

0 个答案: