web-dev-qa-db-ja.com

IE9 / 10/11で幅/高さのあるSVGが拡大縮小しない

IE9/10/11には既知の問題があり、<svg>要素が幅と高さを指定するSVGファイルがあり、widthとheightを使用してSVG画像をスケーリングする場合<img>タグの属性、IEは画像を適切にスケーリングしません。

この問題に遭遇しました。一連のSVGフラグアイコンがあります。 USフラグアイコンの場合、SVGオブジェクトは次のように記述されます。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640">

<!-- elements to draw flag .. -->

</svg>

そして、これがSVGの完全なソースです。

SVGを<img>タグを使用してHTMLドキュメントに挿入し、20x15に縮小します。

Chrome39では、SVGは次のように適切にレンダリングされます。

enter image description here

しかし、IE10では、次のようにレンダリングされます。

enter image description here

ですから、ここで起こっているように見えるのは、IE10が<img>要素を20x15にサイズ変更しても、SVGを縮小しないためです-フラグアイコンの左上隅だけが表示されます。普通の青い箱として。

さて...これは 文書化されたソリューション の既知の問題のようです。 1つの解決策は、SVGファイル内のwidthおよびheight属性をすべて削除することです。実際の設計を台無しにしたくないので、これは少し危険なようです。また、SVGファイルがたくさんある場合は、少し面倒です-ファイルを処理するためにより多くのスクリプトが必要です。

より良い解決策は、CSSを使用してIE10のSVG要素を明確にターゲットにすることです。これは明らかにベンダー固有のメディアクエリを使用して可能です。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  img[src*=".svg"] {
    width: 100%; 
  }
}

わかりましたが、この解決策がわかりません。上記を試してみると、IE10は親コンテナー全体を埋めるようにSVGのサイズを単純に拡張しますが、これは私が望むものではありません。わかりましたので、SVGの幅を100％に設定してから親コンテナのサイズを制限することで、IEでSVGを強制的にスケーリングできます。そこで、幅と高さが20x15のDIVで<img>をラップしました。しかし...その結果、以前と同じ問題が発生しました。コンテナDIVは20x15に固定されていますが、SVGは縮小しません。したがって、最終的には、フラグの左上隅が以前のようになります。

enter image description here

...そのため、このソリューションについて何かを理解していないのでしょう。 IE10/11でフラグアイコンを20x15に縮小するにはどうすればよいですか？

htmlcssinternet-explorersvg
44
Siler

これは、画像にviewBox要素のsvg属性がない場合に発生します。

0 0 640 480に設定する必要があります。ゼロはXとYのオフセットで、640と480は幅と高さに対応します。画像の境界を表す長方形を定義します。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="480" width="640" viewBox="0 0 640 480">
73
Josiah Keller

SVGタグ行から高さと幅を取り出します。

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

この問題は、widthおよびheight属性のみを削除し、CSSのみで操作することで解決できます。

img[src*=".svg"] {
  width: 100%; 
}

注：IE11にSVGをインラインで配置する場合、CSSを使用してSVGタグの幅を100％に設定するとともに、SVGタグにwidth属性とheight属性が必要です。正しくスケーリングします。

20
rfornal

これは、同じ問題を修正するために書かなければならなかったノードスクリプトです（多数のSVGがあるフォルダーの場合）。

'use strict'

const fs = require('fs')

fs.readdir(`./`, (err, flist) => {
    if (typeof flist != 'undefined') {
        flist.forEach((file, i) => {
            proceed(file)
        })
    }
})

function proceed(file){
    fs.readFile(`./${file}`, 'utf8', (err,svg) => {
        let out = svg.replace('<svg', '<svg viewBox="0 0 640 480" ')
        if (!svg.includes('viewBox')){
            fs.writeFile(file, out, err => {
                if(err) {
                    console.log(err);
                } else {
                    console.log("Saved: " + file);
                }
            }) 
        }
    })
}
2
Darwin