在html中引用SVG爲<img>在大多數瀏覽器中打破所有<image> SVG中的位圖

每當我嘗試在使用標記的html中使用svg作爲圖像時，使用<image xlink:href="">標記的svg文件中引用的任何圖像都不會顯示。在html中引用SVG爲<img>在大多數瀏覽器中打破所有<image> SVG中的位圖

這不能在瀏覽器（firefox，chome，chromium，safari）的svg中顯示任何位圖，但在Internet Explorer中顯示圖像）。

HTML文件

<!DOCTYPE html> 
<html> 
<body> 
<img src="svg.svg" height="100" width="200" /> 
</body> 
</html>

SVG文件

<svg version="1.1" 
    baseProfile="full" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" height="100" width="200"> 
    <image height="100" width="200" xlink:href="image1.jpg" /> 
    </svg>

但是如果我直接放在完全相同的代碼在HTML文件中爲

<svg height="100" width="200"> 
<image height="100" width="200" xlink:href="image1.jpg" /> 
</svg>

它的工作原理。

或者如果我引用與<object data="">相同的svg文件，它也可以。 svg文件中的任何矢量對象（如rects）也可以使用<img>或<object>正常工作。

如果我直接加載svg文件，它可以在所有瀏覽器中正常工作。

爲什麼在html中的img標籤會在svg文件中打破我的圖片標籤xlinks？

來源

2015-03-19 Skyfish

使用<img>嵌入的任何SVG都不能引用外部對象（如其他圖像）。這是瀏覽器爲了保護隱私而實施的一項審慎功能。

您可以使用<object>代替嵌入SVG。或者，如果您確實需要使用<img>，請將SVG中的外部圖像引用更改爲數據URI。

來源

2015-03-19 04:32:50

好的，謝謝，我把svg代碼直接放在html文件中，而不是svg文件，它似乎在Firefox中顯示，即鉻，但不是safari。 :(所以我認爲我也不能使用這種方法。 – Skyfish 2015-03-19 06:18:10

在html中引用SVG爲<img>在大多數瀏覽器中打破所有<image> SVG中的位圖

回答

相關問題