Iframe在外部對象標記內呈現

請參閱下面的代碼。 iframe內容呈現在盒子外面，我該如何解決這個問題？在此先感謝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，不會被iframe內容的榮幸（也根據SVG是OK）...

UPDATE：

我發現當我使用test.nl作爲iframe的src時，iframe的內容是錯位的。但是，當我使用另一個鏈接，如123test.nl然後我得到正確呈現的iframe。那麼，test.nl的主腳本可能會導致這個呈現問題呢？

任何想法？

來源

2016-09-14 T.V.A van Hesteren

似乎沒什麼問題上的Firefox瀏覽器。 –

@RobertLongson的確如此。我已經在Firefox中發表評論之後對它進行了測試，並且效果很好。那麼，爲什麼它會在Chrome和Safari瀏覽器中出現錯誤？（我上傳的圖片是在safari中製作的） –

也許會在他們的bug tracker上引發bug。 –

如果你試圖將你的Iframe在foreignObject中心很方便地指定相同的寬度=「3840」和高度=「2160」作爲foreignObject，

來源

2016-09-14 17:15:13 Youslach

以百分比表示的寬度和高度屬性是相對於外來對象元素的。這工作正常，因爲Iframe與外部對象的寬度和高度完全相同。然而，iframe從x = 171和y 166.5開始（顯然當然），但iframe內容以更高的x和y值開始，我不明白爲什麼 –

Iframe在外部對象標記內呈現

回答

相關問題