SVGファイルをHTMLコードに埋め込む際に、異なるブラウザで同じ結果を生成するにはどうすればよいですか？

私は前の質問Overlay SVG diagrams on google mapの解決策を持っています。SVGファイルをHTMLコードに埋め込む際に、異なるブラウザで同じ結果を生成するにはどうすればよいですか？

しかし、もう少し問題があります。私はFirefox 3.5とSafari 4（Macの場合）を使用していますが、SVGをXHTMLに埋め込んでいるとき、私は全く同じ結果を得ていません。

私は<object>または<embedded>要素を使用できます（ただし、最後のものは推奨されません）。私はそれを次のように使います：

<div id="map_canvas" style="width: 900px; height: 900px"> 
    <object data="test.svg" width="100%" height="100%" type="image/svg+xml"/> 
</div>

そして、SVGのサイズとスケールは、FirefoxとSafariでは同じではありません。私のSVGでは、width,heightおよびviewBoxが定義されています。

すべてのブラウザで同じ結果を得る方法はありますか（私はSVGをサポートしていないIEは気にしませんので、 "すべてのブラウザ"とは少なくともFirefoxの最新バージョンを意味します。オペラとサファリ）？多分私が定義するのを忘れた何か？

編集：私はまた<object>で、SVGはFFと透明ますが、サファリと透明ではないことに気づいた... :( SVGを含むように「標準」方法はあり??

はありがとうビューボックスは、SVGで定義されている場合、あなたの助け

出典

2009-07-01 ThibThib

ありがとうございます。これは、私のsvgファイルのための私のクロスブラウザのサポートを整理する負荷を助けた。恥のサポートは一貫していません。 –

また、SVGファイルのブラウザレンダリングの違いを説明する別の要素は 'letter-spacing'属性です。 Firefoxでは現在サポートされていません。https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing#Usage_Note –

のために私は（Windowsの場合）FirefoxとSafariの間の大きさの異なる結果が得られます。

ソリューションは

htmlのobjectタグのwidth属性とheight属性を絶対値（ピクセル）に設定します。
svgファイルのwidth属性とheight属性を相対値（例： 100％）

次に、FFとSafariの両方が同じ動作を示します。あなたの状況に該当する場合は、これを試してください。

EDIT：あなたの新しい質問に関して：私は、標準的な方法があるとは思わない： - ： - 埋め込むための標準的な方法bugs Webkit Safariで透明性はバグのようです。あなたはオブジェクト、iframe、imgまたはsvg（インライン宣言）を使うことができます。

すべてのブラウザで動作させたい場合は、ブラウザに応じてブラウザのスニッフィングを使用し、オブジェクトまたはimgタグを使用する必要があります。または、iframeを試す必要があります。彼らはサファリとファイアフォックスに透明な背景を持つはずです。あなたがここに見ることができるように（しかし、オペラのことは知らない）

常にwebdevブラウザのサポートのようには、大きな問題である：svg support（あなたが画像をクリックすると、あなたが詳細にSVGの機能を確認することができます）

出典

2009-07-02 05:55:40

ありがとうこれは機能します。しかし、透明性については？ SVGの下に何かを置くと、Safariでは白い背景が表示されますが、FFでは表示されません。要素を使用してSVGを埋め込むと、Safariでは動作しますが、FFでは動作しません（GGroundOverlayがFFで動作しない理由は、を使用してSVGを埋め込みます）。 GoogleマップでオーバーレイSVGに関する私の最初の質問） – ThibThib

は、透明性の問題についていくつかのヒントを与えました。この問題を解決できるかどうか教えてください。 –

Ok これらの回答をありがとうございます。ブラウザに応じてタグを選択します。リンク（およびWebkitのバグ）を指摘してくれてありがとう！ – ThibThib

svgwebをSVGのIEレンダリングに使用している場合は、ほとんどのブラウザで同じ動作を実現できます。これはあなたのSVGがインタラクティブではない（JavaScriptを含んでいる）ことを前提としていますが、それ以外のブラウザでは埋め込まれる必要があります。

<html> 
    <head> 
    <!--[if IE]>--><script type="text/javascript" src="javascripts/svg/svg.js"></script><!--<![endif]--> 
    </head> 
    <body> 
    <div id="map_canvas" style="width: 900px; height: 900px"> 
     <!--[if !IE]>--><img src="test.svg" width="900" height="900" /><!--<![endif]--> 
     <!--[if lt IE 9]><object src="test.svg" classid="image/svg+xml" width="900" height="900"></object><![endif]--> 
     <!--[if gte IE 9]><object data="test.svg" type="image/svg+xml" width="900" height="900"></object><![endif]--> 
    </div> 
    </body> 
</html>

出典

2011-09-23 09:18:49 Martin

SVGファイルをHTMLコードに埋め込む際に、異なるブラウザで同じ結果を生成するにはどうすればよいですか？

答えて

関連する問題