HTML中的SVG不顯示嵌入圖像

我有點像下面的代碼顯示我的網站上的svg圖像。HTML中的SVG不顯示嵌入圖像

<a href="http://site.com/path/to/file.svg"> 
<img src="http://site.com/path/to/file.svg"> 
</a>

SVG文件是類似如下：

<svg width="600" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g> 
     <title>Annotation</title> 
     <image xlink:href="http://site.com/path/to/image.jpg" id="svg_1" height="400" width="600" y="0" x="0"/> 
    </g> 
    <g> 
     <title>Layer 1</title> 
     <g id="svg_2"/> 
      <path fill="none" stroke="#000000" stroke-width="3" id="svg_3"..... 
      <line id="svg_4" y2="249" x2="134" y1="248" x1="155" stroke-width="3" stroke="#000000" fill="none"/> 
      <path d="m97,177c0,-1 -0.292892,-1.292892 -1,-2c-0.707108,-0.707108...... 
     </g> 
</svg>

的SVG是加載（通過PHP正確的標題等），可以看到SVG的線條和對象，而不是圖片。

如果我用鼠標右鍵單擊並在新窗口中打開鏈接，我可以看到背景圖像。如果我然後切換回第一個選項卡，其中的圖像顯示在html中的svg鏈接。

看起來好像瀏覽器沒有加載圖像，所以我嘗試了各種各樣的東西，像在它旁邊加載<img src="http://site.com/path/to/image.jpg"/>。平面圖像的作品，但在SVG仍然不會顯示。

這將是很好的避免的東西像IFRAME作爲img標籤和整個SVG倍率設置大小爲好（除非你能在一個iframe做到這一點？）

任何指針將不勝感激。

TL;在SVG DR

圖像不顯示，直到你在第二個選項卡中打開它不具有HTML周圍

來源

2011-10-04 dogmatic69

SVG <img>標籤是SVG標準的子集。這是爲了使它們儘可能地接近其他圖像類型。例如，SVG文件可以運行JavaScript。如果用戶要將SVG圖像上傳到圖像共享網站，那麼允許使用其他安全的<img>標籤顯示的圖像可以運行任意JavaScript，這是意想不到的行爲。加載外部資源等其他行爲也一樣。如果你想要完整的行爲，那麼你可以插入你的SVG圖像或使用<object>標籤。

來源

2011-10-05 00:18:18 kzh

AFAIK所有瀏覽器都會自動禁用svg文件中的js，這些文件使用''標記引用。某些瀏覽器不會加載子資源，例如在使用''引用的svg中使用的樣式表和圖像，即使它們是同源的。 –

這不是我說的嗎？如果不是，我會試圖讓我的答案更清楚。 – kzh

HTML中的SVG不顯示嵌入圖像

回答

相關問題