SVG内的iframe没有加载

Question

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

这是我的代码：

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

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

Answer 1

foreignObject元素需要width和height属性。它们没有宽度和高度的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边界使用位置绝对位置之外，那么也可能会导致问题。