Question

查看代码下方。 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的主脚本可能导致这个渲染问题呢？

有什么想法吗？

Answer 1

如果您尝试将Iframe放在foreignObject的中心，方便指定相同的宽度=＆＃34; 3840＆＃34;和身高=＆＃34; 2160＆＃34;作为foreignObject，

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

1 个答案: