23

縦横比が保持されたタグの内側に (クロップなしで) 収まるタグの内側にSVGグラフィックを配置しようとしています。InkscapeでSVG<img />を作成しました。Internet Explorer 9を除くすべてのブラウザーで期待どおりに動作しました。

IE 9で動作させるには、 viewBox="0 0 580 220"andを追加し、SVGプロパティpreserveAspectRatio="xMidYMid meet"を削除する必要がありました。width="580"height="220" 

<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>

これは、 SVGの縦横比が実際に保持されているにもかかわらず、タグが垂直に引き伸ばされるWebkitで試したところ、どこでも機能するように見えました。<img />

width="580"andheight="220"プロパティを元に戻すと、Webkitでは動作しますが、IE 9ではアスペクト比が失われます。

この動作に対するクロス ブラウザー ソリューションはありますか?

4

5 に答える 5

37

解決策を見つけたようです：

widthとheightプロパティをSVGに保持する必要があります。

<svg
    width="580"
    height="220"
    viewBox="0 0 580 220"
    preserveAspectRatio="xMidYMid meet"
>...</svg>

IE 9で動作させるには、<img />タグの少なくとも 1 つのディメンションを指定する必要があります。

<img src="your.svg" style="width: 100%" />

これはどこでも機能しているようです。

于 2013-05-08T11:49:29.847 に答える
0

解決策に足を踏み入れた方法を追加すると思っただけです。最初はいくつかの問題を理解するのに苦労しました。

  1. SVG ファイルを編集して、ハードコーディングされた高さと幅の属性を削除します。(簡易テキストエディタで)
  2. width:100% css を svg 画像に適用して、IE が他のブラウザーと同じように表示されるようにします。（コンテナと同じ大きさ）
  3. 一貫した結果を得るには、イメージ コンテナーで css を使用してください。

http://ivantown.com/posts/svg-scaling-with-ie/で詳細を説明するページを作成しました。

于 2015-07-23T18:05:41.837 に答える