2016-09-14 6 views
0

コードの下を参照してください。 iframeコンテンツはボックスの外にレンダリングされますが、どうすればこの問題を解決できますか?事前のおかげでiframeはsvg内のforeignobjectタグの外側にレンダリングします

<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)

インラインフレームは、SVG内の適切な場所にあります。しかし、内容はちょうど右にオフセットされています。私がいることが分かった

:それに加えて、幅と高さは

UPDATE ...、iframeの内容によって光栄されていません(また、SVGによるOKです)はiframeに設定しますiframeのsrcとしてtest.nlを使用すると、iframeの内容が正しく配置されません。しかし、123test.nlなどの別のリンクを使用すると、iframeが正しくレンダリングされます。だから、このレンダリングの問題を引き起こすために、test.nlのホームスクリプトで何が間違っているのでしょうか?

アイデア?

+0

は、Firefoxに私には罰金です。 –

+0

@RobertLongson、確かに。私はFirefoxでのあなたのコメントの後にそれをテストし、それはよくレンダリングされました。それで、クロムとサファリにはなぜそれが間違ってレンダリングされますか? (私がアップロードした画像はサファリで作られています) –

+0

バグ追跡者にバグを起こす可能性があります。 –

答えて

0

あなたがのforeignObjectの中心にあなたのiFrameを配置しようとすると、それは同じ幅=「3840」を指定すると便利だとのforeignObjectとして、高さ=「2160」、

+0

widthおよびheight属性のパーセント値は、外部オブジェクト要素に関連しています。これは、Iframeが異物と正確に同じ幅と高さであるため、問題なく動作します。しかし、iframeはx = 171とy 166.5(当然のことながらもちろん)から始まりますが、iframeのコンテンツはxとyの値が高くなり始めます –

関連する問題