项目中经常会遇到选择一个复杂图片的某个区域，然后做点击或其他操作。
如在这个图片上，分别点击上中下三个区域做不同的操作。

btn.png

处理方法：
1.把图片导入ai中，把需要点击的区域的轮廓分别用钢笔工具画出来，颜色填充或者线描边，图层顺序：轮廓在背景上面，如下图所示，导出svg。

image.png

2.svg中path（也就是选择的轮廓）的样式直接设置fill填充颜色或者stroke描边颜色,去掉style样式

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" 
viewBox="0 0 78 199">
<defs>
<!-- <style>.cls-1{fill:none;stroke:grba(0,0,0,0);stroke-miterlimit:10;}
</style> -->
</defs>
<g id="btn" data-name="btn">
<image width="78" height="199" xlink:href="btn-operate.png"/>
</g>

<g id="top">
<polygon cursor='pointer'  points="7.82 78 7.82 26.04 36.32 6.64 38.82 10.02 41.65 6.64 69.32 23.64 69.82 78 38.82 59.97 7.82 78"/>
</g>

<g id="bottom">
<polygon  cursor='pointer'  points="7.82 123.05 7.82 173.84 35.32 192.64 39 189.03 42.32 192.64 69.82 173.21 69.82 123.05 39 140.53 7.82 123.05"/>
</g>

<g id="center">
<polygon cursor='pointer'  points="39 59.97 2.32 80.64 2.32 119.51 39 139.91 75.32 119.64 75.32 80.37 39 59.97"/>
</g>

</svg>

3.在js文件中使用<embed>标签展示svg图片，通过id获取每个区域，增加点击事件。
这里的id就是svg文件中<g>标签的id，也是ai软件中图层的名字，所以在ai中就可以把id名字命名好

export default function index() {
  useEffect(() => {
    const embed = document.querySelector('embed');
    // 加延迟是为了等dom挂载上
    setTimeout(() => {
      const dom = embed.getSVGDocument();
      if (dom) {
        const btnTop = dom.querySelector('#top'); // 这里的id就是svg文件中<g>标签的id，也是ai软件中图层的名字，所以在ai中就可以把id名字命名好
        const btnCenter = dom.querySelector('#center');
        const btnBottom = dom.querySelector('#bottom');
        btnTop.setAttribute('fill', 'rgba(0,0,0,0)');
        btnCenter.setAttribute('fill', 'rgba(0,0,0,0)');
        btnBottom.setAttribute('fill', 'rgba(0,0,0,0)');

        btnTop.addEventListener('mousedown', function () {
          console.log('放大');
        });

        btnCenter.addEventListener('mousedown', function () {
          console.log('旋转');
        });

        btnBottom.addEventListener('mousedown', function () {
          console.log('缩小');
        });
      }
    }, 100);
  }, []);

  return (
    <embed
      id="btn"
      src={operateBtn}
      width="78px"
      height="200px"
      type="image/svg+xml"
      pluginspage="http://www.adobe.com/svg/viewer/install/"
    />
  );
}

如此便可以对图片上不同的区域做操作了！