使用 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/