怎样用svg图标做markup？How to add svg string as markup

[Rackar]

参照了 https://antv-x6.gitee.io/zh/examples/node/tool#button 实例，
想要在node:mouseenter中添加一个设置按钮，已经从iconfont拷贝了一段svg代码，做一个齿轮按钮
但是只找到了markup文字、图片和按钮的例子，没找到path做按钮怎么添加，尝试了tagName=“path” or tagName=“image”都没有生效。

想写形如这样的代码，请教如何修改才能生效？

node.addTools({
        name: 'button',
        args: {
            markup: [
{
                    tagName: 'image',
                    selector: 'button',
                    path: 'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z',

                    attrs: {
                            fill: '#06d0db',
                            stroke: '#06d0db',
                            strokeWidth: 2,
                            cursor: 'pointer'
                }
]}})

[NewByVector]

可以这样子：

markup: [
  {
    tagName: 'path',
    'd': 'M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z'
  }
]

[Rackar]

感谢，可以了。才发现示例中有一个使用SVG自定义图标就是这样实现的。之前怎么没找到

{
            tagName: "path",
            attrs: {
              d:
                'M24.82,48.678c5.422,0,9.832-6.644,9.832-14.811c0-8.165-4.41-14.809-9.832-14.809s-9.833,6.644-9.833,14.809C14.987,42.034,19.399,48.678,24.82,48.678z',
            },
          },

[Rackar]

又出现了奇怪的问题 😃 我该如何修改这个svg的大小呢？尝试修改width和height，增加viewbox都未果，出现了十分可笑的巨图标

[NewByVector]

这个就需要去修改你的 d 属性了。我觉得你这里直接用 image 标签，设置 xlink:href 来设置图片 url，这样会好一点。

[Rackar]

感谢，xlink:href没找到相对路径的引用法，使用绝对路径搞定了。还想抽空写个等比例缩放d的工具

[NewByVector]

一般在框架内部可以直接这样用：

{
  'xlink:href': require('../../a.png')
}

[Rackar]

一般在框架内部可以直接这样用：

{
  'xlink:href': require('../../a.png')
}

IT WORKS！！！！！！！！！！
流泪 😭 花了半天搞图标，终于爽啦
感谢感谢

[Rackar]

找到了合适的缩放path d的工具。
留作参考

const {SvgPath}= require('svgpath-toolkit') ;
const d='M95.855,55.806c-0.6-0.605-1.516-0.77-2.285-0.4C81.232,61.29,65.125,64.53,48.214,64.53c-16.907,0-33.015-3.24-45.354-9.123c-0.77-0.367-1.688-0.205-2.284,0.4c-0.599,0.606-0.747,1.526-0.369,2.29c5.606,11.351,25.349,19.277,48.008,19.277c22.668,0,42.412-7.929,48.012-19.279C96.603,57.332,96.453,56.411,95.855,55.806z'
const resultPath = SvgPath(d).scale(0.2).round(3).toString();

//resultPath ='M19.171 11.161c-0.12-0.121-0.303-0.154-0.457-0.08C16.246 12.258 13.025 12.906 9.643 12.906c-3.381 0-6.603-0.648-9.071-1.825-0.154-0.073-0.338-0.041-0.457 0.08-0.12 0.121-0.149 0.305-0.074 0.458 1.121 2.27 5.07 3.855 9.602 3.856 4.534 0 8.482-1.586 9.602-3.856C19.321 11.466 19.291 11.282 19.171 11.161z'