SVG中的圖片圖片標籤沒有顯示在Chrome中，但在本地顯示？

由於某些原因，Chrome在其圖片標籤中顯示的圖片沒有圖片。SVG中的圖片圖片標籤沒有顯示在Chrome中，但在本地顯示？

這裏是我的SVG的例子：

<image xlink:href="blocker.png" height="312.666661" width="85.693825" y="16.479997" x="459.946664"/>

blocker.png是本地文件，但我也試着上傳到imgur，但也不能工作。

下面是SVG標籤：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

下面是它看起來像本地：

http://i.imgur.com/BDP8KpG.png

下面是它看起來像一個實際的網頁：

http://i.imgur.com/KVuxLI1.png

，你可以看，這兩名球員都失蹤了。當我在網上上傳SVG這不會發生，但是當我試圖在URL鏈接到我的網頁，同樣的事情發生

不知道，如果是相關的，但這裏是頁面的HTML代碼：

<!DOCTYPE HTML> 
<html> 
<head> 
<title>SVG</title> 
<style> 
img{ 
    width: 100%; 
    height:auto; 
    max-width: 800px; 
} 
</style> 
</head> 

<body> 

<div> 
    <img src="svg.svg"/> 
</div> 

</body> 
</html>

來源

2016-12-17 sgruggy

你確定要改變''標籤的路徑以反映變化？即把'blocker.png'改成'http：// imgur.com/you/ABCDEF'或其他任何鏈接是 – Jhecht

@Jhecht是的，我確信我做到了。我在本地加載它，它出現了。加載在我的網頁上，它沒有。 – sgruggy

PaulLeBeau的答案是正確的。但另一種解決方案是使用embed標籤代替圖片的img標籤。

<embed src="svg.svg">

Here是一些在HTML中嵌入svg圖像的方法。

來源

2016-12-17 06:15:24 nisekgao

哇，很棒！謝謝：） – kabrice

當您使用<img>元素將SVG加載到網頁中時，SVG必須是自包含的。它不能像鏈接到PNG文件那樣鏈接到第三方資源。這是瀏覽器施加的隱私限制。

可能的解決方案是：

轉換您的PNG到數據URI格式，包括他們在您的SVG的方式。
將您的攔截器PNG（s）轉換爲實際的SVG元素，例如<path>。

來源

2016-12-17 05:49:31

爲什麼它會在本地工作？ – sgruggy

如果這是真的，那麼當我將它上載到在線圖像託管網站時，它不起作用。 – sgruggy

在瀏覽器中查看SVG（即'.svg'文件）很好，因爲您沒有通過''加載它。如果您的圖像託管站點直接託管並提供'.svg'文件，而不是通過''嵌入它，這同樣適用。 –

-1

我偶然發現如果圖像文件不在html根目錄下，Chrome [v 58.0.3029.81（64位）]不會在svg中顯示圖像。的.SVG和嵌入.png文件放在/圖像-folder的.SVG內容直接在Chrome上來，而不是嵌入式巴紐。當.png被複制到（../）html根目錄時，Chrome就可以運行。

但是，Firefox [v 52.0.2（32位）]在.svg和.png位於同一個/ images文件夾時似乎工作正常。

編輯：其實在我的情況下，我加載svg與d3.xml（..）方法獲取js句柄到實際的svg元素。

來源

2017-04-20 17:42:54 mpeli

SVG中的圖片圖片標籤沒有顯示在Chrome中，但在本地顯示？

回答

相關問題