代码之家 › 专栏 › 技术社区 › Crashalot

如何正确设置嵌入到SVG元素中的HTML的高度

svg html

Crashalot · 技术社区 · 5 年前

目标是使嵌入在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>

1 回复 | 直到 5 年前

web-tiki 5 年前

在您的例子中,Firefox是有效的。
旁注, this question

#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>