自定义节点设置svg无法正确显示 #4434

问题描述

自定义节点需要给节点设置图标，但是图标无法正确显示。img设置成png是可以正确显示的，但是svg不行

重现链接

无

重现步骤

G6.registerNode(
        'custom-node',
        {
          draw(cfg, group) {
            const cricle = group.addShape('circle', {
              attrs: Object.assign(
                {
                  r: 15,
                  fill: '#82CAF5',
                  lineWidth: 1,
                },
              ),
              name: 'key-shape',
              zIndex: 1, // 图形层级
            });

            // 节点中心的图标
            group.addShape('image', {
              attrs: {
                x: 0,
                y: 0,
                width: 20,
                height: 20,
                img: require('@/icons/test.svg'),
              },
              name: 'center-image',
              zIndex: 2,
            });

            group.sort();
            return cricle;
          }
        },
        'circle'
      )
    },

test.svg如下：

<svg t="1681098086966" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11163" width="16" height="16"><path d="M1007.629548 392.326351c-279.99118 159.753032-559.982359 613.045204-559.982359 613.045204-240.476295-294.103638-431.276736-353.375965-431.276736-353.375965l240.476295-139.431092c112.899669 108.383682 190.800441 185.719956 190.800441 185.719956C763.201764 96.529217 1007.629548 18.628445 1007.629548 18.628445L1007.629548 392.326351z" fill="#3ac443" p-id="11164"></path></svg>

预期行为

期望节点上可以正确显示icon，实际上是空白的，只有circle

平台

• 操作系统: Windows10
• 网页浏览器: Google Chrome
• G6 版本: 4.8.7

屏幕截图或视频（可选）

No response

补充说明（可选）

No response