html - SVG 中的 iframe 未加载

Question

据我所知，使用 <foreignObject /> 可以在 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 边界使用绝对位置的位置之外，这也可能会给您带来问题。