在ie11中發生SVG問題

Question

我有一個div，其高度設置為320像素，然后它的子設置為100％的寬度。 那個孩子是一個SVG文件，我將寬度設置為容器的200％。 在chrome和firefox工作正常，我得到一個像這樣的好圖像：

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中，我得到了這個：

如果我檢查元素，我可以看到SVG看起來左右有填充，但我可以向你保證它沒有。

有誰知道為什么會這樣，以及我如何解決它？

更新1

我在codepen上創建了一個非常簡單的版本，因此您可以看到問題。 這里是：

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

在chrome，firefox，Edge和IE11中查看。 你會看到只有IE11才有問題。

Answer 1

您可以做的是將height="320"屬性添加到SVG標記。 因此IE可以正確呈現。 我相信在CSS中使用寬度為200％的IE11會被拋棄。 但由於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頁面中不需要它。 您還可以刪除一些SVG屬性，如version ， xmlns ， xmlns:xlink ， x和y ，因為這些屬性也不需要。

Answer 2

我在IE11中遇到了SVG圖像顯示問題。 問題是內部svg圖像有寬度和高度提到。 由於這一點，它無法在IE11上正確擴展，它在IE邊緣，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">