如何点击按钮在Fabric.js画布中添加自定义SVG

现有如下SVG代码：

<svg viewBox="-8 -8 136 136">
<path stroke="#000000" stroke-width="8" d="m0 51.82677l0 0c0 -28.623135 23.203636 -51.82677 51.82677 -51.82677l0 0c13.745312 0 26.927654 5.4603047 36.64706 15.17971c9.719406 9.719404 15.17971 22.901749 15.17971 36.64706l0 0c0 28.623135 -23.203636 51.82677 -51.82677 51.82677l0 0c-28.623135 0 -51.82677 -23.203636 -51.82677 -51.82677zm25.913385 0l0 0c0 14.311565 11.60182 25.913387 25.913385 25.913387c14.311565 0 25.913387 -11.601822 25.913387 -25.913387c0 -14.311565 -11.601822 -25.913385 -25.913387 -25.913385l0 0c-14.311565 0 -25.913385 11.60182 -25.913385 25.913385z" fill="none"></path>
</svg>

需要实现点击按钮时，将该SVG添加到Fabric.js画布中。

1. 引入Fabric.js库 #

先在HTML中引入Fabric.js，可使用CDN版本：

<script src="https://cdn.jsdelivr.net/npm/fabric@5.3.0/dist/fabric.min.js"></script>

2. 搭建HTML结构 #

需要一个画布容器和触发添加操作的按钮：

<canvas id="canvas" width="400" height="400"></canvas>
<button id="addSvgBtn">添加SVG到画布</button>

3. 编写核心逻辑 #

利用Fabric.js的SVG解析API，完成点击添加功能：

// 初始化Fabric画布实例
const canvas = new fabric.Canvas('canvas');

// 定义目标SVG字符串
const targetSvg = `
<svg viewBox="-8 -8 136 136">
<path stroke="#000000" stroke-width="8" d="m0 51.82677l0 0c0 -28.623135 23.203636 -51.82677 51.82677 -51.82677l0 0c13.745312 0 26.927654 5.4603047 36.64706 15.17971c9.719406 9.719404 15.17971 22.901749 15.17971 36.64706l0 0c0 28.623135 -23.203636 51.82677 -51.82677 51.82677l0 0c-28.623135 0 -51.82677 -23.203636 -51.82677 -51.82677zm25.913385 0l0 0c0 14.311565 11.60182 25.913387 25.913385 25.913387c14.311565 0 25.913387 -11.601822 25.913387 -25.913387c0 -14.311565 -11.601822 -25.913385 -25.913387 -25.913385l0 0c-14.311565 0 -25.913385 11.60182 -25.913385 25.913385z" fill="none"></path>
</svg>
`;

// 绑定按钮点击事件
document.getElementById('addSvgBtn').addEventListener('click', () => {
  // 解析SVG字符串
  fabric.loadSVGFromString(targetSvg, (objects, options) => {
    // 将解析后的SVG元素组合为一个组，方便统一操作
    const svgGroup = fabric.util.groupSVGElements(objects, options);
    
    // 设置SVG在画布中的位置（可选，这里设为画布中心）
    svgGroup.set({
      left: canvas.width / 2,
      top: canvas.height / 2,
      originX: 'center',
      originY: 'center'
    });
    
    // 添加组到画布并刷新渲染
    canvas.add(svgGroup);
    canvas.renderAll();
  });
});

关键说明 #

• fabric.loadSVGFromString()：Fabric.js内置的SVG字符串解析方法，返回解析后的图形对象数组和配置项。
• fabric.util.groupSVGElements()：把分散的SVG元素合并成一个组，便于统一调整位置、缩放等属性。
• canvas.renderAll()：添加元素后必须调用此方法，才能让画布刷新显示新内容。

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