当前位置: 首页 > 知识库问答 >
问题:

前端 - svg foreignObject 里面有不确定高度宽度的html 如何让foreignObject高度随内部html高度?

禹智渊
2023-05-05

因为需要给固定宽高才会渲染htmlimage.png
但是内部div高度不定 如何让html撑开foreignObject的高度

共有1个答案

商德泽
2023-05-05
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
  <foreignObject id="foreign-object" width="100%" height="100">
    <div id="inner-html" xmlns="http://www.w3.org/1999/xhtml">
      <div id="content" style="border: 1px solid black; padding: 10px;">
        <p>这是一个段落。高度是不确定的。</p>
        <p>这是另一个段落。这可能会影响总体高度。</p>
      </div>
    </div>
  </foreignObject>
</svg>


window.addEventListener("load", () => {
  const content = document.getElementById("content");
  const foreignObject = document.getElementById("foreign-object");

  const contentHeight = content.offsetHeight;

  foreignObject.setAttribute("height", contentHeight);
});
 类似资料:
  • 我如何才能使它的应用程序是优化的所有屏幕?

  • 组件的高度和宽度决定了其在屏幕上显示的尺寸。 指定宽高 最简单的给组件设定尺寸的方式就是在样式中指定固定的 width 和 height 。React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。 export default class HelloWorld extends Component { render() { return ( <

  • 问题内容: 假设我希望在浏览器的显示(视口)中居中。为此,我需要计算元素的宽度和高度。 我应该使用什么?请提供有关浏览器兼容性的信息。 问题答案: 您应该使用和属性。请注意,它们属于元素,而不属于。 执行CSS转换后,函数将元素的尺寸和位置作为浮点数返回。

  • 我有一个字体对象,我需要字体的宽度和高度。我知道getSize()返回字体的高度,因为字体的点号通常是高度,但在确定字体的宽度时,我不知所措。 或者,能够确定字体支持的每个特定字符的宽度也是一个可接受的解决方案。 我的最佳猜测是,宽度是在使用loadFont方法时指定的,但文档没有指定size参数是表示字体的宽度还是高度。 使用的所有字体都是单空格字体,如DejaVu Sans mono、GNU

  • 问题内容: 在下面的代码中,我希望带有“ y”的div将div的高度与3个“ x”相匹配。 需要注意的是内部div是浮动的。 问题答案: 如果您不反对使用jQuery,可以使用EqualHeight,它应该做您想要的

  • 问题内容: 假设我希望在浏览器的显示(视口)中居中。为此,我需要计算元素的宽度和高度。 我应该使用什么?请提供有关浏览器兼容性的信息。 问题答案: 您应该使用和属性。请注意,它们属于元素,而不属于。 执行CSS转换后,函数将元素的尺寸和位置作为浮点数返回。