[英]SVG with width/height doesn't scale on IE9/10/11
IE 9/10/11 存在一個已知問題,如果您有一個 SVG 文件,其中<svg>
元素指定寬度和高度,然后使用<img>
標簽的width
和height
屬性縮放 SVG 圖像, IE 無法正確縮放圖像。
我遇到了這個問題。 我有一系列 SVG 標志圖標。 對於美國國旗圖標,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 插入帶有<img>
標簽的 HTML 文檔中,並將其縮小到 20x15:
在 Chrome 39 上,SVG 正確呈現如下:
但是在 IE10 上,它呈現如下:
所以,這里似乎發生的事情是,即使 IE10 將<img>
元素的大小設置為 20x15,它也不會縮小 SVG - 所以我們最終只看到標志圖標的左上角,它顯示為普通的藍色盒子。
好的......所以這似乎是一個已知的問題,有記錄的解決方案。 一種解決方案是簡單地刪除 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,然后限制父容器的大小。 所以我將<img>
包裹在一個寬度和高度為 20x15 的 DIV 中。 但是......這只是導致了與以前相同的問題:容器 DIV 固定為 20x15,但 SVG 沒有縮小 - 所以我們最終得到的只是標志的左上角和以前一樣:
...所以,我可能只是不了解有關此解決方案的某些內容。 如何讓 IE10/11 將標志圖標縮小到 20x15?
當您的圖像缺少svg
元素上的viewBox
屬性時,就會發生這種情況。
你的應該設置為: 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">
從 SVG 標記行中取出高度和寬度。
當指定 viewBox、width 和 height 屬性時,IE9、IE10 和 IE11 無法正確縮放添加了 img 標簽的 SVG 文件。
可以通過僅刪除width
和height
屬性並僅通過 CSS 操作它們來解決此問題。
img[src*=".svg"] {
width: 100%;
}
注意:如果您在 IE11 中放置 SVG 內聯,則需要在 SVG 標簽中設置 width 和 height 屬性,並使用 CSS 將 SVG 標簽的寬度設置為 100%,以便正確縮放。
這是我必須編寫的節點腳本來解決相同的問題(對於包含多個 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);
}
})
}
})
}
從wonderflags 中查看@ this flag 以獲得答案,您需要設置viewbox="0 0 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"><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>
使用 boostrap img-fluid 的內聯 SVG 遇到了很多麻煩。 SVG 總是以錯誤的高度呈現。 我使用下面的代碼來修復它。 在 IE10 和 IE11 中測試。
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
svg.img-fluid {
position: absolute;
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.