ECharts中使用SVG路径作为Symbol时如何实现节点全域可点击

以下几种方案可以让你的SVG Symbol整个区域（包括路径间隙）都响应点击事件：

• 添加透明背景矩形
  在SVG Symbol内部最底层加一个和viewBox尺寸完全匹配的透明矩形，把点击事件绑定到这个矩形上（或者和原有路径共用同一个事件处理函数）。这个矩形会覆盖Symbol的全部区域，不管路径有没有间隙，点击任何位置都会触发事件。
  示例代码：

<symbol id="mySymbol" viewBox="0 0 100 100">
  <!-- 底层透明矩形，覆盖整个Symbol区域 -->
  <rect width="100" height="100" fill="transparent" onclick="handleClick()"/>
  <!-- 你原本的路径图形 -->
  <path d="M10,20 L50,80 L90,20 Z" fill="#4285F4"/>
</symbol>

• 用div包裹并指定点击区域
  如果是通过<use>引用SVG Symbol，可以给<use>套一个div，设置div的宽高和Symbol的viewBox一致，把div的pointer-events设为auto，同时将SVG的pointer-events设为none，然后给div绑定点击事件。这样整个div区域都会响应点击。
  示例代码：

<div style="width:100px; height:100px; cursor:pointer;" onclick="handleClick()">
  <use href="#mySymbol" style="pointer-events:none;"/>
</div>

• 利用SVG的pointer-events属性
  给SVG Symbol的根元素或者<use>元素设置pointer-events="all"，不过这个属性需要元素有明确的边界盒才能生效。如果你的SVG没有天然的完整边界，还是建议配合透明矩形一起使用，确保整个区域都能被点击到。

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