10

以前の質問Overlay SVG diagrams on google mapの解決策を見つけ始めました。

しかし、別の (小さな) 問題があります。私は 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、Opera、および Safari の最新バージョンを意味します) ?? 多分私が定義するのを忘れた何か？

編集: また、SVG は FF では透明ですが、Safari では透明ではないことにも気付きました<object>... :( SVG を含める「標準的な」方法はありますか??

ご協力ありがとうございました

4

2 に答える 2

6

ビューボックスがsvgで定義されている場合、FirefoxとSafari（Windows上）の間でサイズが異なるだけです。

解決策は

  • html の object タグの幅と高さの属性を絶対値 (ピクセル) に設定します。
  • svg ファイルの幅と高さの属性を相対値 (例: 100%) に設定します。

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

編集: あなたの新しい質問について: - Safari の透過性はバグのようです: Webkit のバグ - 埋め込みの標準的な方法: 標準的な方法はないと思います。object、iframe、img、または svg (インライン宣言) を使用できます。

すべてのブラウザーで動作するようにするには、おそらくブラウザー スニッフィングを使用し、ブラウザーに応じてオブジェクトまたは img タグを使用する必要があります。または、iframe を試す必要があります。Safari と Firefox では背景が透明であると想定されているためです。（でもオペラは知らない）

ここでわかるように、いつものように webdev ブラウザーのサポートは大きな問題です: svg サポート(画像をクリックすると、svg 機能を詳細に確認できます)

于 2009-07-02T05:55:40.303 に答える
0

SVG の IE レンダリングにsvgwebを使用している場合、ほとんどのブラウザーで同じ動作を実現できます。これは、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-23T09:18:49.763 に答える