SVG với chiều rộng/chiều cao không tỷ lệ trên IE9/10/11

Question

Đã xảy ra sự cố với IE 9/10/11 nếu bạn có tệp SVG trong đó phần tử <svg> chỉ định chiều rộng và chiều cao, sau đó bạn mở rộng hình ảnh SVG sử dụng các thuộc tính width và height của thẻ <img>, IE không chia tỷ lệ hình ảnh đúng cách.

Tôi đã gặp sự cố này. Tôi có một loạt các biểu tượng cờ SVG. Đối với biểu tượng lá cờ Mỹ, đối tượng SVG được viết như sau:

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

And here's the full source for the SVG.

tôi chèn SVG vào một tài liệu HTML với một thẻ <img>, và xuống quy mô nó để 20x15:

Mở Chrome 39, SVG được trả lại đúng như vậy:

Nhưng trên IE10, nó ám như sau:

Vì vậy, những gì dường như xảy ra ở đây là mặc dù IE10 kích thước các yếu tố <img> đến 20x15, nó không thu hẹp các SVG - vì vậy chúng tôi sẽ chỉ nhìn thấy góc trên cùng bên trái của biểu tượng lá cờ, xuất hiện dưới dạng một hộp màu xanh đơn giản.

OK ... vì vậy, điều này có vẻ là vấn đề đã biết với documented solutions. Một giải pháp là chỉ cần xóa tất cả các thuộc tính width và height trong tệp SVG. Điều này có vẻ hơi nguy hiểm vì tôi không muốn làm hỏng thiết kế thực tế. Nó cũng hơi cồng kềnh nếu bạn có nhiều tệp SVG - yêu cầu nhiều tập lệnh hơn để xử lý tệp.

Một giải pháp đẹp hơn là sử dụng CSS để nhắm mục tiêu cụ thể là yếu tố SVG trong IE10, mà rõ ràng là có thể sử dụng một truy vấn cụ thể phương tiện truyền thông nhà cung cấp:

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

Được rồi, nhưng tôi không hiểu giải pháp này. Khi tôi thử ở trên, IE10 chỉ đơn giản là mở rộng kích thước của SVG để lấp đầy toàn bộ vùng chứa mẹ, không phải là thứ tôi muốn. Được rồi, vì vậy có lẽ tôi có thể buộc IE mở rộng SVG bằng cách đặt độ rộng SVG thành 100%, nhưng sau đó hạn chế kích thước của vùng chứa mẹ. Vì vậy, tôi đã bọc <img> trong DIV với chiều rộng và chiều cao là 20x15. Nhưng ... mà chỉ dẫn đến cùng một vấn đề như trước đây: DIV container được cố định ở mức 20x15, nhưng SVG không co lại - vì vậy tất cả những gì chúng tôi kết thúc là góc trên cùng bên trái của cờ như trước:

... vì vậy, có lẽ tôi không hiểu gì về giải pháp này. Làm thế nào tôi có thể nhận được IE10/11 để mở rộng biểu tượng cờ xuống 20x15?

Answer 1

Điều này xảy ra khi hình ảnh của bạn thiếu thuộc tính viewBox trên phần tử svg.

Bạn nên đặt thành: 0 0 640 480. Các số không là X và Y bù đắp và 640 và 480 tương ứng với chiều rộng và chiều cao. Nó định nghĩa một hình chữ nhật đại diện cho các ranh giới của hình ảnh.

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

Answer 2

Lấy chiều cao và chiều rộng ra khỏi dòng thẻ SVG.

IE9, IE10 và IE11 không định tỷ lệ đúng tệp SVG được thêm bằng thẻ img khi thuộc tính viewBox, chiều rộng và chiều cao được chỉ định.

Sự cố có thể được giải quyết bằng cách xóa chỉ width và height thuộc tính và thao tác chúng thông qua CSS.

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

Answer 3

đây là kịch bản nút tôi đã phải viết để khắc phục vấn đề tương tự (đối với thư mục với một số SVG), có thể nó sẽ rất hữu ích cho ai đó:

'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); 
       } 
      }) 
     } 
    }) 
} 

Answer 4

Look @ này cờ từ wonderflags cho câu trả lời của bạn, bạn cần phải đặt viewbox = "0 0 640 480" hoặc nó sẽ không hoạt động. (Cờ EU)

<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"><defs><g id="d"><g id="b"><path d="M0-1l-.3 1h.5z" id="a"/><use transform="scale(-1 1)" xlink:href="#a"/></g><g id="c"><use transform="rotate(72)" xlink:href="#b"/><use transform="rotate(144)" xlink:href="#b"/></g><use transform="scale(-1 1)" xlink:href="#c"/></g></defs><path fill="#039" d="M0 0h640v480H0z"/><g transform="translate(320 242.263) scale(23.7037)" fill="#fc0"><use height="100%" width="100%" xlink:href="#d" y="-6"/><use height="100%" width="100%" xlink:href="#d" y="6"/><g id="e"><use height="100%" width="100%" xlink:href="#d" x="-6"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(-144 -2.344 -2.11)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(144 -2.11 -2.344)"/><use height="100%" width="100%" xlink:href="#d" transform="rotate(72 -4.663 -2.076)"/><use xlink:href="#d" transform="rotate(72 -5.076 .534)"/></g><use height="100%" width="100%" xlink:href="#e" transform="scale(-1 1)"/></g></svg>