Question

目标是使嵌入SVG元素中的HTML占据根SVG元素的全部宽度和高度，而SVG根元素本身也嵌入在HTML文档中。

但是，从Codepen中可以看到，width属性似乎起作用，但是height属性不能影响根SVG元素。结果，嵌入式div的高度不是2688像素。

最终，SVG根元素及其内容应为1242x2688。

怎么了？

<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
  <foreignObject width="100%" height="100%">
    <div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
      Why is this height wrong?
    </div>
  </foreignObject>
</svg>

Answer 1

在Firefox中，您的示例有效。
在旁注中，this question通过将div绝对定位在svg元素内来提供解决方案：

#testBox {
  position:absolute;
}

<svg id="rootSVGBox" width="1242" height="2688" viewBox="0 0 1242 2688">
   <foreignObject width="100%" height="100%">
      <div id="testBox" style="width: 100%; height: 100%; background:#00B9FC" xmlns="http://www.w3.org/1999/xhtml">
        This is 100% height.
      </div>
   </foreignObject>
</svg>

如何为嵌入的SVG元素内的HTML正确设置高度

1 个答案: