爲什麼SVG viewbox屬性僅適用於內聯SVG？

我下載了一些使用viewbox屬性的16x16 SVG圖標來縮放原始代碼，以便下載時可放入16x16畫布。現在我所遇到的是，我無法從外部文件插入SVG，因爲viewbox屬性只是無法處理它。如果我將SVG代碼內聯，那麼它就可以工作。爲什麼SVG viewbox屬性僅適用於內聯SVG？

我錯過了什麼，或者這是怎麼回事？

這是代碼。

<?xml version="1.0" encoding="utf-8"?> 
 
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" height="16" viewbox="0 0 48 48" width="16"> 
 
    <path clip-rule="evenodd" d="M37,47H11c-2.209,0-4-1.791-4-4V5c0-2.209,1.791-4,4-4h18.973 
 
    c0.002,0,0.005,0,0.007,0h0.02H30c0.32,0,0.593,0.161,0.776,0.395l9.829,9.829C40.84,11.407,41,11.68,41,12l0,0v0.021                         
 
    c0,0.002,0,0.003,0,0.005V43C41,45.209,39.209,47,37,47z M31,4.381V11h6.619L31,4.381z M39,13h-9c-0.553,0-1-0.448-1-1V3H11 
 
    C9.896,3,9,3.896,9,5v38c0,1.104,0.896,2,2,2h26c1.104,0,2-0.896,2-2V13z M33,39H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18 
 
    c0.553,0,1,0.448,1,1C34,38.553,33.553,39,33,39z M33,31H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1 
 
    C34,30.553,33.553,31,33,31z M33,23H15c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h18c0.553,0,1,0.448,1,1C34,22.553,33.553,23,33,23 z" 
 
    fill-rule="evenodd"/> 
 
</svg>

來源

2017-04-12 chatterb0x

外部SVGs有內聯SVGs沒有要求。例如'xmlns'屬性和瀏覽器同源限制。如果沒有關於如何加載SVG的更多信息，以及它的內容是什麼，我們無法真正幫助您。 –

還要注意，該屬性被稱爲viewBox而不是viewbox。對於內聯來說，這種區別並不重要，因爲它是獨立的。 –

我已更新帖子並添加了代碼。 *更新*：我改變了viewbox爲viewBox像羅伯特建議，現在它工作，如果我嵌入外部文件。謝謝。 – chatterb0x

注意，這不是viewBoxviewbox - 瀏覽器有時可能會救你，但並非總是如此。

見的全部細節如下： https://jsfiddle.net/t88pLgbb/4/

來源

2017-12-12 23:48:25 GufNZ

你應該添加代碼片段到你的答案以及:) –

爲什麼SVG viewbox屬性僅適用於內聯SVG？

回答

相關問題