web-dev-qa-db-ja.com

IE9-10でSVGを使用したバックグラウンドサイズ

背景画像が設定されたdivがあります：

<div>Play Video</div>

次のCSSを使用します。

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

背景サイズは、Firefox、Safari、およびChromeで尊重されます。 IE8では、SVGはPNGファイルに置き換えられます。ただし、IE9およびIE10では、SVGファイルのサイズが大幅に縮小されます。問題は、divの幅と高さに関係しているようです。 150pxの高さを追加すると、SVGは適切にレンダリングされます。小さく（つまり、100ピクセル）すると、グラフィックが縮小し始めます。

エクスプローラでこの問題を解決する方法を見つけた人はいますか？ divの幅と高さに関係なくbackground-size値を使用するようにIEに指示する方法はありますか？

csssvginternet-explorer-9internet-explorer-10background-size
73
Julesfrog

SVGにwidthとheightが指定されていることを確認してください。 Illustratorから生成する場合は、このオプションで幅と高さが削除されるため、[応答]ボックスがオフになっていることを確認してください。

162
mbxtr

SVGに幅と高さを追加すると、mbxtrは私にとってはほとんど機能すると言いました。 IEで応答するようにするには、preserveAspectRatio="none slice"も追加する必要がありました。

13
Simeon Rowsell

私にとって、これらの3つの修正が役立ちました：

  • 可能であれば、background-positionを「center」に設定します
  • Background-sizeが両方の値を設定する場合、「100％auto」はトリックを実行しないため、「100％100％」を使用します
  • それでも、SVG自体の最後の値を「viewBox」属性に変更して、SVGの幅と高さよりも1ピクセル広く、高くするのに役立たない場合。これにより、SVGが少し縮小されますが、IEが切り取られるのが停止します。小さなサイズはまったく認識されません。
4
Christian Krammer

まあ、それは解決策があるようには見えません。サプライズサプライズ。結局IEです。私は次のコードを使用することになりました：

div {
padding: 20px;
width: 150px;
position: relative;
}

div:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 50%;
right: 30px;
margin-top: -20px;
background-image: url('icon.png');
background-image: url('icon.svg'), none;
}

クリーナーバージョンの方が好きでしたが、このハックはIE8、9、10（おそらく11ですが、テストしませんでした）を含むすべての最新ブラウザーで動作します。

3
Julesfrog

この問題があり、heightとwidthのいずれかを削除することがわかりましたviewBoxを保持するsvg BUTのコード内で問題を解決できます。

https://jakearchibald.github.io/svgomg/ のようなコンパイラサイトを使用し、オプションを"高さと幅よりもviewBoxを優先する"

またが機能しない場合、Illustratorでsvg画像の周囲に正方形の背景を適用しますが、エッジの周囲に十分な余白を残します。

-> data uri：...を使用して、スタイルシートにsvgをインポートします。例：

background-image：data-uri（ 'image/svg + xml; charset = UTF-8'、 'where/your/svg/is/located'）;

2
Harry Joao

1. javascript

    drips.style.top = -dripsTop + "px";
 var browser = window.navigator.userAgent;
  if (browser.indexOf("Trident") > 0) {
     $(".flow_space").css({"background":"url(../img/space2-ie.svg) no-repeat", "background-size":"100%"});
  }
  1. svg（元の高さ= 1050）自分に直接追加svgファイルpreserveAspectRatio = "none" height = "2100"
0
Maksimov Maksim

含まれている要素（検索入力の左側の虫眼鏡など）の完全なサイトではないSVG背景画像でも同様の問題がありました。

Illustrator CCでSVGを作成しましたが、Peter CollingridgeのSVGオプティマイザーを介してSVGを実行し、不要な不要なデータをすべて取り除きました。 http://petercollingridge.appspot.com/svg-optimiser

0
Chaffron

Svg背景画像サイズは、これらのプロパティを使用してIEとChromeで同じようにレンダリングされます

background: #ffffff url("images/calendar.svg") no-repeat;
border: 1px solid #dddddd;
float: left;
margin: 0;
overflow: hidden;
background-size:15px 15px;
0
Super Model

@mbxtrのソリューションを試しました

SVGに幅と高さが指定されていることを確認してください。 Illustratorから生成する場合は、このオプションで幅と高さが削除されるため、[応答]ボックスがオフになっていることを確認してください。

Windows ChromeおよびIEでは、まだうまくいきませんでした。フォントアイコンをエクスポートしていたので、フォントがある場合は、次のようにエクスポートしてください。

  • "font：アウトラインに変換"
  • および"responsive"はfalse

また、念のため「縮小」のチェックを外しました...

0
Beatriz Gonzalez