如何在Canvas中使用SVG图像标记并解决替换PNG后失效的问题

直接把PNG路径换成SVG路径没用，大概率是这几个原因：

• SVG没指定尺寸：Canvas渲染SVG时，如果SVG本身没定义width/height或者viewBox，浏览器不知道怎么计算显示尺寸，画出来就是0大小，等于没显示。
• 加载时机没处理：Image加载资源是异步的，不管是PNG还是SVG，都得等onload事件触发后再往Canvas上画。之前的代码没做这个判断，换SVG后加载速度可能更慢，更容易出现没加载完就绘制的情况。
• 跨域或SVG格式问题：如果SVG是外部域名的，可能触发跨域限制；或者SVG文件里有语法错误，导致无法解析。

推荐解决方案：用Data URI内嵌SVG（还能直接改颜色） #

既然要自定义颜色，直接把SVG代码转成Data URI写在代码里最方便，不用依赖外部文件，还能随时修改fill属性。示例代码如下：

var Marker = function () {
    this.Sprite = new Image();
    // 直接修改fill="#ff0000"就能自定义标记颜色
    this.Sprite.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="32" viewBox="0 0 20 32"><path d="M10 0C4.48 0 0 4.48 0 10c0 10 10 22 10 22s10-12 10-22c0-5.52-4.48-10-10-10zm0 16c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z" fill="#ff0000"/></svg>';
    this.Width = 20;
    this.Height = 32;
    this.XPos = 0;
    this.YPos = 0;
    this.textarea = null;

    // 必须等SVG加载完成再绘制，这里可以触发你的Canvas绘制逻辑
    this.Sprite.onload = function() {
        console.log('SVG加载完成，可开始绘制');
    };
}

额外注意点 #

• 如果坚持用外部SVG文件，要确保SVG文件开头包含必要属性：

  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="32" viewBox="0 0 20 32">
    <!-- 你的路径代码 -->
  </svg>
  

• 跨域问题的话，要么把SVG放到自己域名下，要么给服务器配置CORS允许访问。

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