SVG作为img引用不可点击，内联含DataURI的SVG无法显示求助

我来帮你搞定这个问题，你遇到的情况挺常见——用img标签引用SVG时，里面的交互元素确实没法生效，而内联SVG报错大概率是因为base64图片数据的问题或者格式冲突。下面给你几个可行的解决方案：

方案1：用<object>标签替代<img>标签 #

这是最省心的办法，不用修改SVG文件，直接替换页面里的img标签就行。<object>标签会完整解析SVG的DOM结构，保留所有交互功能：

把原来的img代码：

<img src="img/cherry.svg" class="center">

替换成：

<object data="img/cherry.svg" class="center" type="image/svg+xml"></object>

然后调整你的CSS，确保object元素能正确响应样式：

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: auto;
}
object {
  height: 100%;
  width: 100%;
}

这样浏览器会正确渲染SVG并允许点击里面的链接，不用内联就能解决问题。

方案2：正确内联SVG并修复base64问题 #

如果你坚持要内联SVG，需要先处理几个关键点：

1. 移除不必要的XML声明和DOCTYPE：现代浏览器加载内联SVG时不需要这些声明，保留可能导致解析错误。
2. 确保base64图片数据完整：你提供的SVG里base64内容末尾有....... (lines of rubbish)，这明显是截断或无效的数据，必须替换成完整的base64字符串。
3. 直接嵌入SVG代码到HTML中：

修改后的内联示例大概是这样：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Index</title>
  <style>
    svg.center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
      height: auto;
    }
  </style>
</head>
<body>
  <div>
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="1280px" viewBox="0 0 800 1280" enable-background="new 0 0 800 1280" xml:space="preserve">
      <image id="image0" width="800" height="1280" x="0" y="0" xlink:href="data:image/png;base64,完整的base64字符串..."/>
      <a xlink:href="http://www.google.com">
        <rect x="535" y="28" fill="#fff" opacity="0.8" width="150" height="750" />
      </a>
    </svg>
  </div>
</body>
</html>

注意一定要把完整的base64字符串...替换成你实际的、未截断的PNG base64数据，否则图片无法显示。

为什么会出现这个问题？ #

• 当用<img>标签加载SVG时，浏览器会把它当作静态位图资源处理，只会渲染视觉内容，不会解析SVG内部的DOM结构和交互元素（比如<a>标签），所以链接无法点击。
• 而<object>标签或内联SVG会让浏览器解析SVG的完整DOM，因此交互功能可以正常触发。

内容的提问来源于stack exchange，提问作者WesternGun