使用jQuery加载服务器SVG至HTML元素失败，求排查及事件绑定方案

我来帮你分析下这段代码的问题，以及对应的解决办法——毕竟要给SVG元素绑定事件，确实不能用img标签，咱们一步步来：

可能存在的问题 #

• 跨域请求被阻止：如果你的页面所在域名和http://example.com不是同一个域名，浏览器的同源策略会直接拦截这个请求，导致SVG内容根本加载不进来。你可以打开浏览器控制台，看看有没有跨域相关的报错信息。
• SVG被当作纯文本插入，未解析为DOM元素：$.get默认以文本格式获取内容，直接把SVG字符串塞进div里的话，有些浏览器不会自动把它解析成可渲染的SVG DOM元素，自然就显示不出来。
• SVG缺失命名空间声明：如果你的SVG文件开头没有xmlns="http://www.w3.org/2000/svg"这个命名空间，浏览器可能无法识别这是SVG元素，也就没法正常渲染。

对应的解决方案 #

1. 先解决跨域问题 #

如果是跨域导致的，要么把SVG放到和页面同域名的位置，要么让SVG所在的服务器配置CORS规则，允许你的页面域名访问这个资源。

2. 正确解析SVG为DOM元素 #

你可以修改$.get的dataType参数为"xml"，让jQuery把返回内容解析成XML文档，再提取SVG元素插入：

$.get("http://example.com/_assets/img/gptest.svg", function(data) {
  // 取出SVG元素
  const svgElement = $(data).find("svg")[0];
  $("#svg-main").append(svgElement);
}, "xml");

或者用DOMParser手动解析SVG字符串，兼容性也不错：

$.get("http://example.com/_assets/img/gptest.svg", function(data) {
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(data, "image/svg+xml");
  $("#svg-main").append(svgDoc.documentElement);
});

3. 检查SVG的命名空间 #

打开你的gptest.svg文件，确保开头的<svg>标签包含命名空间：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <!-- 你的SVG内容 -->
</svg>

如果没有，加上这行声明就好。

4. 绑定事件的正确姿势 #

SVG插入到页面后，就可以正常给内部元素绑定事件了，比如：

// 给SVG里的所有path绑定点击事件
$("#svg-main").on("click", "path", function() {
  console.log("你点击了路径！");
  $(this).attr("fill", "#ff0000");
});

或者在插入SVG的回调里直接绑定：

$.get("http://example.com/_assets/img/gptest.svg", function(data) {
  const svgElement = $(data).find("svg")[0];
  $("#svg-main").append(svgElement);
  // 给SVG里的特定元素绑定鼠标移入事件
  $(svgElement).find(".target-element").on("mouseenter", function() {
    $(this).attr("stroke-width", "3");
  });
}, "xml");

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