3

問題：Safariがボールを再生しておらず、スクロールバーを使用してSVG画像をレンダリングしています。

質問の改善版：「Safariで設定された幅を埋め、アスペクト比に基づいて高さを計算するにはどうすればよいですか？」（Phrogzに感謝）

関連コード：

SVGファイル

 viewBox="0 0 800 800"

（高さや幅は指定されていません）

.objectwrapper {
  max-width: 600px;
  min-width: 150px;
  margin-right: auto;
  margin-left: auto;
}
.objectdiv {
  max-width: 60%;
  margin-right: auto;
  margin-left: auto;
  display: block;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
  <meta http-equiv="expires" content="0" />
</head>

<body>
  <div class="objectwrapper">
    <div class="objectdiv">
      <object type="image/svg+xml" data="question0optimize1.svg" width="100%" height="100%">
      </object>
    </div>
  </div>
</body>

</html>

私が試した他のすべてのブラウザでは、ウィンドウサイズの変更とCtrl+ズームでスムーズなスケーリングが得られます。しかし、Safariは私に小さなsvgとスクロールバーを提供します。私は何が間違っているのですか？

4

3 に答える 3

6

WindowsのSafari5でのSVGでも同様の問題が発生しました。明らかな理由もなくスクロールバーが表示されました。

ここで私のための解決策を見つけました：https ：//stackoverflow.com/a/8025526/2244646 ：

テキストエディタでSVGを開き、svg-nodeのheight属性を79.999pxから80pxに丸める必要がありました。どういうわけかSafari5はこれらのフィールドの奇数が好きではありません。

于 2014-01-30T12:37:32.553 に答える
3

Safariでスクロールバーが表示される理由は次のとおりです。

  1. height="100%"上にobjectそれを体と同じくらい高くしている、そして
  2. <object>デフォルトでdisplay:inlineは、オブジェクトの下に追加のベースライン（4px-6px）が表示されるためです。100％+何かがウィンドウよりも高いため、スクロールバーが表示されます。

最終的なプレゼンテーションをどのようにするか、具体的には、高さをどの程度にするかを明確にできれば、<object>クロスブラウザーで機能させることができます。

ほとんどの場合、a）CSS経由で設定display:blockするか、b）をから<object>削除します。（クロスブラウザーの高さ制御が必要な場合は、表示属性ではなく、CSSを使用して高さを設定します。）height="100%"<object>

失敗したテストの注釈付きの例は
http://phrogz.net/svg/svg_via_object.html
で、修正されたバージョンは
http://phrogz.net/svg/svg_via_object.xhtmlで見ることができます。

（HTML4とXHTMLの使用は、問題や修正とは関係ありません。）

于 2012-04-05T15:14:30.330 に答える
1

WindowsでSafariを使用しているSVGでも同じ問題が発生しました。SVGには垂直スクロールバーと水平スクロールバーがありました。

ただし、テキストエディタでSVGファイルを開いたところ、高さと幅の属性が奇数でした。それらを偶数に変更したところ、問題は解決しました。

于 2015-04-19T21:30:13.593 に答える