SVG 内的 iframe 未加载

Question

据我所知，可以通过使用<foreignObject />tag 在 SVG 中添加 HTML 标签。我想使用 iframe 内部 SVG 加载页面，但它不起作用。我错过了什么吗？或者它只是不可能使用 HTML 内部 SVG ？

这是我的代码：

<svg xmlns="http://www.w3.org/2000/svg">
    <foreignObject x="0" y="0">
        <iframe src="content.html" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
    </foreignObject>
</svg>

我尝试直接从浏览器加载它，但它什么也没显示。

Answer 1

foreignObject 元素需要宽度和高度属性。它们没有宽度和高度 CSS 样式，事实上，您提供的所有 CSS 都不适合foreignObject 元素，并且会被忽略。

这应该可以工作（前提是您没有使用 IE，因为它当前不支持foreignObject）

<svg xmlns="http://www.w3.org/2000/svg">
    <foreignObject width="100%" height="100%">
        <iframe src="content.html" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
    </foreignObject>
</svg>

请注意，如果您将 iframe 移出foreignObject 边界使用绝对位置的位置，那么也可能会给您带来问题。