svg图像使用xlink：href无法在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>

只有当我直接将其作为网址

打开时，它才能在chrome中完美运行

但是当我在html中引用它时

<img src="xxx.svg"/>

图像消失了。

显示svg文件中的所有其他对象，但图像标记除外。也不是移动铬。

我尝试了其他webkit浏览器，html引用的svg图像在safari中运行良好。

我尝试过dataURI，仍然没有在chrome中显示。 https://gw.alicdn.com/tps/TB1LsQqLFXXXXXYXpXXXXXXXXXX-103-92.svg

编辑：在我的浏览器中，如果我在新标签页中访问此页面，则上图显示为空白圆圈。

点击链接后，浏览器标签跳转到图像，图像显示正确。

我点击浏览器后，页面返回到此页面，图像发生变化，显示出来。

Answer 1

xlink:herf 的使用在 SVG 中已被弃用

所以当你直接打开 svg 时，它会工作，因为它本身不包含它

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