使用 xlink:href 的 svg 圖像在 chrome 中不起作用

Question

我有這個圖像使用 xlink:href

file    xxx.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="103" height="92.75" viewBox="0 0 103 92.75">

<image x="0" y="0" xlink:href="http://gw.alicdn.com/tps/i4/TB1QygcLFXXXXcmaXXXTQYPHFXX-60-41.png"  width="40" height="28"/>

  <..something else>

只有當我直接將其作為 url 地址打開時，它才能在 chrome 中完美運行

但是當我在 html 中引用它時

<img src="xxx.svg"/>

圖像不見了。

svg 文件中的所有其他對象都顯示出來，除了圖像標簽。 無論是在移動 chrome 中。

我嘗試了其他 webkit 瀏覽器，html 引用的 svg 圖像在 safari 中工作正常。

我試過dataURI，仍然沒有顯示在chrome中。 https://gw.alicdn.com/tps/TB1LsQqLFXXXXXXYXpXXXXXXXXXX-103-92.svg

編輯：在我的瀏覽器中，如果我在新選項卡中訪問此頁面，則上圖顯示為一個空圓圈。

單擊鏈接后，瀏覽器選項卡跳轉到圖像，圖像顯示正確。

在我點擊瀏覽器后，頁面返回到這里這個頁面，圖像改變了，顯示出來了。

Answer 1

SVG 中已棄用xlink:herf

因此，當您直接打開 svg 時，它會工作，因為它本身不包含它

https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/