iframe 在 svg 中呈现外部外部对象标记答案

【问题标题】：Iframe renders outside foreignobject tag within svgiframe 在 svg 中呈现外部外部对象标记
【发布时间】：2016-09-14 15:59:42
【问题描述】：

见下面的代码。 iframe 内容在框外呈现，我该如何解决这个问题？提前致谢

<svg class=imac viewBox="0 0 4182 3461" xmlns="http://www.w3.org/2000/svg"><g id="Mac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="iMac-27-inches" sketch:type="MSArtboardGroup" transform="translate(-409.000000, -270.000000)">
        <g sketch:type="MSLayerGroup" transform="translate(409.000000, 270.000000)">
            <g id="Body" transform="translate(0.000000, 2489.000000)" sketch:type="MSShapeGroup">
                <path d="M1577.64,971.42 C1505.81,971.42 1459.903,966.251 1455.929,955.691 L1455.929,941.928 L2726.059,941.928 L2726.059,955.691 C2722.085,966.251 2676.178,971.42 2604.348,971.42 L1577.638,971.42 L1577.64,971.42 Z" id="Leg-Front" fill="#D5D2CF"></path>
                <path d="M1575.87,959.63 C1517.429,959.63 1456.947,956.394 1455.935,941.935 C1466.604,920.26 1602.695,849.688 1620.41,817.781 C1646.689,783.33 1664.504,545.619 1676.143,389.447 L1676.143,385.515 L2505.859,385.515 L2505.859,389.447 C2517.498,545.619 2535.313,783.33 2561.592,817.781 C2579.307,849.688 2715.398,920.26 2726.067,941.935 C2725.055,956.394 2664.573,959.63 2606.132,959.63 L1575.872,959.63 L1575.87,959.63 Z" id="Leg" fill="#C3C3C3"></path>
                <path d="M4182,0.14 L0,0.14 L0,290.438 C0,345.077 44.36,389.438 99,389.438 L4083,389.438 C4137.64,389.438 4182,345.077 4182,290.438 L4182,0.14 L4182,0.14 Z" id="Body1" fill="#D5D2CF"></path>
                </g>
            <g id="Screen" fill="#343434" sketch:type="MSShapeGroup">
                <path d="M4182,99 C4182,44.36 4137.64,0 4083,0 L99,0 C44.36,0 0,44.36 0,99 L0,2493.08 L4182,2493.08 L4182,99 L4182,99 Z" id="Black-Frame"></path>
                <path d="M4015.5,164.974 C4015.5,163.319 4014.156,161.974 4012.5,161.974 L169.5,161.974 C167.844,161.974 166.5,163.319 166.5,164.974 L166.5,2327.974 C166.5,2329.63 167.844,2330.974 169.5,2330.974 L4012.5,2330.974 C4014.156,2330.974 4015.5,2329.63 4015.5,2327.974 L4015.5,164.974 L4015.5,164.974 Z" id="Screen-Frame"></path>
                <rect id="Screen1" x="171" y="166.5" width="3840" height="2160"></rect>
                <foreignObject x="171" y="166.5" width="3840" height="2160">
                <iframe xmlns="http://www.w3.org/1999/xhtml" src="http://test.nl" style="width: 100%; height: 100%;"></iframe>
                </foreignObject>
            </g>
        <circle id="Camera" fill="#3E3E3E" sketch:type="MSShapeGroup" cx="2091" cy="68.815" r="17.695"></circle>
        </g>
    </g>
</svg>

see Example (image)

iframe 位于 svg 中的正确位置。但是，它的内容只是向下和向右偏移。除此之外，设置为 iframe 的宽度和高度（根据 svg 也可以），iframe 内容不支持...

更新：

我发现当我使用 test.nl 作为 iframe 的 src 时，iframe 内容放错了位置。但是，当我使用另一个链接（例如 123test.nl）时，我可以让 iframe 正确呈现。那么，test.nl 的主脚本有什么问题会导致这个渲染问题呢？

有什么想法吗？

【问题讨论】：

在 Firefox 上我觉得很好。
@RobertLongson，确实如此。在您在 Firefox 中发表评论后，我已经对其进行了测试，并且效果很好。那么，为什么它在 chrome 和 safari 上呈现错误？（我上传的图片是safari制作的）
也许在他们的 bugtracker 上提出 bug。

标签： object iframe svg rendering

【解决方案1】：

如果您尝试将 iframe 放置在 foreignObject 的中心，指定与 foreignObject 相同的 width="3840" 和 height="2160" 会很方便，

【讨论】：

以百分比表示的宽度和高度属性是相对于外来对象元素的。这很好用，因为 iframe 的宽度和高度与异物完全相同。然而，iframe 从 x=171 和 y 166.5 开始（当然很明显），但是 iframe 内容以更高的 x 和 y 值开始，我不明白为什么