web-dev-qa-db-ja.com

IE11でのSVGの問題

320ピクセルに設定された高さを持つdivがあり、その子はその100％幅に設定されます。その子はSVGファイルで、幅をコンテナの200％に設定します。 chromeおよび正常に動作するfirefoxでは、次のような素敵な画像が得られます。

enter image description here

HTMLは次のようになります。

<div class="kit-template ng-isolate-scope front">
    <div class="svg-document ng-scope">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
            <!-- Removed for brevity -->
        </svg>
    </div>
</div>

cSS/SASSは次のようになります。

.kit-template {
    overflow: hidden;
    position: relative;   
    height: 320px;

    .svg-document {  
        width: 100%;   
        overflow: hidden;
        margin: 0 auto;
        /*position: absolute;
        bottom: 0;*/

        svg {
            width: 200%;

            path, polyline, polygon, rect {
                cursor: pointer;
            }
        }
    }
}

私が言ったように、これはChrome、Firefox、およびIE Edgeの両方で正常に動作します。しかしIE11ではこれを取得します。

enter image description here

そして、要素を調べてみると、SVGには左右にパディングがあるように見えますが、そうでないことは保証できます。

誰がこれが起こっているのか、どうすれば修正できるのか知っていますか？

更新1

Codepenで非常に簡単なバージョンを作成したので、問題を確認できます。ここにあります：

http://codepen.io/r3plica/pen/Kdypwe

Chrome、firefox、Edge、そしてIE11で表示してください。 IE11のみに問題があることがわかります。

htmlcsssvginternet-explorer-11
16
r3plica

できることは、SVGタグにheight="320"属性を追加することです。したがって、IEは正しくレンダリングできます。IE11はCSSで幅200％を使用するとスローされます。しかし、xml:space="preserve"がデフォルトであるため、高さのみを設定すると、 SVGジャケット。

IE11でのcodepenの例をテストします。

http://codepen.io/jonathan/pen/MarvEm

<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">

また、XML名前空間タグは、HTMLページ内では必要ないため削除してください。また、version、xmlns、xmlns:xlink、x、yなどのSVG属性を削除することもできます。同様に必要。

11
Jonathan Marzullo

IE11でSVG画像表示の問題が発生していました。問題は、内側のsvg画像の幅と高さが言及されていたことです。このため、IE11では適切にスケーリングできず、IE Edge、chrome、firefoxで非常にうまく動作しました。

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

この問題を修正するために、width = "120" height = "120"を削除し、正常に機能するようにしました。 svg画像がwidth = "120" height = "120" viewBox = "0 0 120 120"であったのを観察したが、IE11では表示されていたwidth = "120" height = "120"。

出力は：

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">

enter image description here

0
Sandeep M