如何以编程方式触发SVG矩形元素的点击事件？

其实SVG元素本质上也是DOM元素，不管用原生JS还是jQuery都能轻松触发它的点击事件，下面给你两种常用的实现方式：

原生JavaScript实现 #

首先你需要准确获取到目标SVG矩形元素，然后创建一个模拟的鼠标点击事件并分发出去，效果和用户手动点击完全一致：

// 用选择器定位到目标SVG矩形（对应你示例里clipPath下的rect）
const targetRect = document.querySelector('#highcharts-74tub7h-41 rect');

// 创建符合标准的鼠标点击事件，设置bubbles为true保证事件能正常冒泡
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window
});

// 触发点击事件
targetRect.dispatchEvent(clickEvent);

jQuery实现 #

如果你习惯用jQuery，直接用trigger()方法就可以，和你提到的写法几乎一样，关键是要确保选择器能准确命中SVG元素：

// 选中目标SVG矩形并触发点击
$("#highcharts-74tub7h-41 rect").trigger("click");

额外注意事项 #

• 元素加载时机：如果你的SVG是像Highcharts这类库动态生成的（比如你示例里的图表），一定要等SVG完全渲染完成后再执行触发代码。比如用jQuery的$(document).ready()，或者Highcharts自带的load回调函数：

  Highcharts.chart('your-chart-container', {
    // 图表配置项...
    events: {
      load: function() {
        // 在图表加载完成后触发矩形点击
        $("#highcharts-74tub7h-41 rect").trigger("click");
      }
    }
  });
  

• 选择器准确性：SVG元素的层级结构可能比较深，要确保你的选择器能精准定位到目标矩形，避免选中其他元素。

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