web-dev-qa-db-ja.com

IE9で考慮されないimg要素の比率のSVG

CSS：

img{
    max-height:30px;
}

HTML：

<img src="foo.svg" />

最大30ピクセルの高さに比例してスケーリングするこのsvg画像を探しています。 svgの自然な寸法は200x200ピクセルです。 FFおよびChrome（30x30）でうまく動作しますが、IE9では画像は30x200です。今度はキッカーです。特定のSVGファイルでのみ発生し、他のsvgは正しくスケーリングします。

違いは、1つはポリゴンで作成され、もう1つはパスで作成されているようです。

正しくスケーリングされない：

http://www.radiantinteractive.com/rs/images/allies/other/crocs.svg

正しくスケーリングします：

なぜこれが起こるのか、またはIE9で最初に比例してスケーリングする方法はありますか？

csssvginternet-explorer-9
41
Fresheyeball

ブラウザ間でより一貫したスケーリングを得るには、必ずviewBoxを指定し、width要素のheightおよびsvg属性を指定しないようにしてください。 テストページの作成 CSSで指定された幅と高さと組み合わせて、異なるSVG属性を指定した場合の効果を比較しました。いくつかの異なるブラウザで並べて比較すると、処理に多くの違いがあります。

113
robertc

Ie9で修正し、これにこだわらないようにします。理由はわかりませんが、css-ruleでwidth：100％を設定する必要がありますが、img-tagでは設定しないでください。アスペクト比は魔法で機能します））それは私を助けました、この投稿が他の人を助けることを願っています。

22
Able

こちらもご覧ください： https://Gist.github.com/larrybotha/7881691 -これはこの「物語」の続きです。

IE9、IE10、IE11でスケーリングされない<img>タグのSVGを修正

IE9、IE10、およびIE11は、img、viewBox、およびwidth属性が指定されている場合、heightタグが追加されたSVGファイルを適切にスケーリングしません。さまざまなブラウザで このcodepen を表示します。

画像が画像幅より狭いコンテナ内にある場合、画像の高さは拡大縮小されません。これは2つの方法で解決できます。

Bashでsedを使用して、SVGファイルの幅と高さの属性を削除します

Stackoverflowのこの回答 のとおり、width属性とheight属性のみを削除することで問題を解決できます。

この小さなスクリプトは、現在の作業ディレクトリでSVGファイルを再帰的に検索し、ブラウザ間の互換性のために属性を削除します。

find ./ -name '*.svg' -print0 | xargs -0 sed -i "" -e 's/width="[0-9]*\.*\[0-9]*" //' -e 's/height="[0-9]*\.*\[0-9]*" //'

注意事項

幅と高さの属性を削除すると、画像がIE以外のブラウザでコンテナの幅いっぱいに表示されます。

IE10（他のブラウザではテストが必要）は、画像を任意のサイズに縮小します。つまり、それらの画像をコンテナに合わせるには、CSSにwidth: 100%を追加する必要があります。

ターゲットIE CSSを使用

とにかく上記のソリューションはCSSを必要とするため、ハックを使用してIEを取得し、個々のSVGファイルを管理する必要はありません。

以下は、SVGファイルを含むすべてのimgタグをIE6 +でターゲットにします（ただし、IE9 +のみがSVGファイルをサポートします）。

/*
 * Let's target IE to respect aspect ratios and sizes for img tags containing SVG files
 *
 * [1] IE9
 * [2] IE10+
 */
/* 1 */
.ie9 img[src*=".svg"] {
  width: 100%; 
}
/* 2 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

注意事項

これは、IE9、IE10、およびIE11の「.svg」を含むすべてのimgタグを対象としています。特定の画像でこの動作が望ましくない場合は、その画像のこの動作をオーバーライドするクラスを追加する必要があります。

10
Martenti

私は週間を費やして、あらゆる種類のソリューションを試して、主要な最新のブラウザで動作するサイズに適応可能なウェブサイトでSVGを使用できるようにしました。

SVGは、CSSパーセンテージを使用してスケーリングし、埋め込みビットマップ画像を含める必要があります。

IE）でサイズ変更の割合を見つけたonlyソリューションは、外部SVGを<に埋め込むことです object>タグ。

IEでSVGのサイズを変更するためのさまざまな解決策があり、ピクセルサイズを厳密にしますが、いずれもパーセントサイズ変更には機能しません。

非網羅的なテストスイート here を作成しました。

1
Andrew Swift

どういうわけか、このscssは私の問題を修正しました。

ul {
  li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
    img {
      height: 20px;
      margin: 0 10px;
      display: inline-block;
    }
  }
}

私は実際にフッター用のロゴの中央リストを作成していましたが、幅の問題がありました。通常、内部にブロック要素を持つインラインブロックを作成します。インラインブロック要素を使用してインライン要素を作成すると、うまくいきました。これはバグが私に見せた特定の実装であり、すべてのバグを実際に解決するわけではありませんが、これを読んでいる人の助けになることを願っています。

0
Brandon Buttars