如何使用JavaScript将Canvas生成的Base64图片填充SVG路径？

你之前的两种方法都存在语法或逻辑错误，以下是修正后的可行方案：

核心思路 #

通过SVG的<pattern>元素将Canvas生成的图片转为可重复的填充图案，再将目标路径的fill属性指向该图案的ID。

正确代码实现 #

SVG结构 #

<svg width="200" height="200">
  <!-- 定义填充图案，width/height控制图案平铺尺寸 -->
  <pattern id="canvasFillPattern" patternUnits="userSpaceOnUse" width="100" height="100">
    <image id="patternImage" x="0" y="0" width="100" height="100" />
  </pattern>
  <!-- 需要填充的路径 -->
  <path id="path1" class="st1" d="M80.2,43.1C74,37.8,67.9,32.5,61.7,27.2c1.6-3.6,3.2-7.1,4.8-10.7C71,25.3,75.6,34.2,80.2,43.1z" fill="url(#canvasFillPattern)" />
</svg>

JavaScript代码 #

// 假设myCanvas是你已绘制内容的Canvas元素
const canvasDataURL = myCanvas.toDataURL();
// 直接将Canvas的dataURL赋值给image的href属性，无需额外包裹url()
document.getElementById('patternImage').setAttribute('href', canvasDataURL);

你之前的错误分析 #

1. 方法一错误：SVG的fill属性使用url()时，括号内只能引用SVG内部定义的渐变、图案等元素的ID，不能直接传入dataURL。若要直接用dataURL填充，需去掉url()，直接写fill="你的dataURL"，但这种方式无法控制平铺效果，不推荐。
2. 方法二错误：
   • 路径的fill引用ID为#img，但你定义的pattern ID是img1，两者不匹配；
   • 给image的href赋值时错误添加了url()包裹，直接传入dataURL即可；
   • 路径的SVG代码存在语法错误：fill="url(#img)/> 缺少闭合引号和尖括号，应为fill="url(#img1)" />。

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