Các vấn đề về SVG ở số 11

Question

Tôi có một div có chiều cao là 320 pixel, khi đó con của nó được đặt thành 100% chiều rộng. Đứa trẻ trong số đó là tệp SVG mà tôi đặt chiều rộng là 200% của vùng chứa. Trong chrome và firefox mà hoạt động tốt, tôi nhận được một hình ảnh đẹp như thế này:

HTML trông như thế này:

<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> 

và CSS/Sass trông như thế này:

.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; 
      } 
     } 
    } 
} 

Như tôi đã nói, tính năng này hoạt động tốt ở cả Chrome, Firefox và IE Edge. Nhưng trong IE11 tôi có được điều này:

Và nếu tôi kiểm tra nguyên tố, tôi có thể thấy rằng SVG có vẻ như nó đã đệm trái và chuột phải vào nó, nhưng tôi có thể đảm bảo với bạn nó không.

Có ai biết tại sao điều này xảy ra và cách tôi có thể khắc phục sự cố không?

Cập nhật 1

Tôi đã tạo ra một phiên bản rất đơn giản trên codepen vì vậy bạn có thể thấy vấn đề này. Ở đây là:

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

Xem rằng trong chrome, firefox, Edge và sau đó IE11. Bạn sẽ thấy rằng chỉ có IE11 có vấn đề.

Answer 1

Việc bạn có thể làm là thêm thuộc tính height="320" vào thẻ SVG của mình. Vì vậy, IE có thể hiển thị chính xác. Tôi tin rằng IE11 được ném ra bằng cách sử dụng chiều rộng 200% trong CSS của bạn. Nhưng kể từ khi xml:space="preserve" là mặc định, thiết lập chỉ chiều cao sẽ giữ tỷ lệ của áo khoác SVG của bạn.

thử ví dụ codepen trong IE11:

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"> 

Cũng loại bỏ các thẻ XML namespace vì nó không cần thiết bên trong một trang HTML. Và bạn cũng có thể xóa một số thuộc tính SVG như version, xmlns, xmlns:xlink, x và y, vì những thuộc tính này cũng không cần thiết.