Highcharts：如何为自定义stock-tool按钮添加自定义SVG图标？

要把预定义的text.svg图标换成你自己的自定义SVG，有两种靠谱的方式，我结合你的代码示例一步步说明：

方法1：直接用内联SVG字符串 #

这是最简单且无跨域风险的方式，你只需要把自己的SVG代码压缩成单行字符串，直接赋值给symbol属性就行：

1. 先处理你的SVG文件：

   • 删掉所有换行和多余空格，压缩成单行
   • 如果SVG里有双引号，改成单引号（或者用JavaScript模板字符串包裹）
   • 一定要设置正确的viewBox属性，保证图标能正常缩放

2. 修改你的代码：

lang: { 
  stockTools: { gui: { customAnnotation: 'Custom action' } }, 
  navigation: { popup: { customAnnotation: 'Action config' } } 
},
stockTools: { 
  gui: { 
    enabled: true, 
    buttons: [ 'customAnnotation','customAnnotation','customAnnotation' ], 
    definitions: { 
      customAnnotation: { 
        className: 'highcharts-custom-annotation',
        // 这里替换成你自己的内联SVG字符串
        symbol: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2L2 18h16L10 2z" fill="#333"/></svg>'
      } 
    } 
  } 
}

方法2：使用自定义Symbol函数 #

如果需要动态调整图标（比如根据按钮状态改颜色、尺寸），可以定义一个函数返回SVG内容：

lang: { 
  stockTools: { gui: { customAnnotation: 'Custom action' } }, 
  navigation: { popup: { customAnnotation: 'Action config' } } 
},
stockTools: { 
  gui: { 
    enabled: true, 
    buttons: [ 'customAnnotation','customAnnotation','customAnnotation' ], 
    definitions: { 
      customAnnotation: { 
        className: 'highcharts-custom-annotation',
        symbol: function(x, y, width, height) {
          // x/y是图标的起始坐标，width/height是按钮的尺寸
          return `<svg x="${x}" y="${y}" width="${width}" height="${height}" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 2L2 18h16L10 2z" fill="#555"/>
          </svg>`;
        }
      } 
    } 
  } 
}

注意事项 #

• 要是想用外部SVG文件，直接写文件路径（比如symbol: './my-custom-icon.svg'）也可以，但得注意跨域问题——如果页面和SVG文件不在同一个域名下，可能加载失败，所以优先推荐内联方式。
• 确保SVG的viewBox和按钮尺寸匹配，避免图标拉伸变形。
• 可以用在线SVG压缩工具优化代码，减少体积。

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