Svelte中导入SVG并为内部元素绑定onclick事件的最优方案

场景1：可修改SVG源文件（推荐方案） #

直接将SVG转换为Svelte组件，完全贴合Svelte的组件化思路，事件绑定直观且维护性最强：

1. 创建新的Svelte组件（例如src/lib/components/Squares.svelte），复制原SVG内容并给每个带ID的rect添加onclick事件：

<svg xmlns="http://www.w3.org/2000/svg" width="..." height="..." ...>
  <!-- 保留原SVG的其他元素与属性 -->
  <rect id="data1" onclick="{handleClick}" fill="..." x="..." y="..." />
  <rect id="data2" onclick="{handleClick}" fill="..." x="..." y="..." />
  <rect id="data3" onclick="{handleClick}" fill="..." x="..." y="..." />
</svg>

<script>
  function handleClick(e) {
    const targetId = e.target.id;
    // 编写你的点击逻辑，比如根据ID执行对应操作
    console.log(`点击了元素：${targetId}`);
  }
</script>

2. 在+page.svelte中导入并使用该组件：

<script>
  import Squares from '$lib/components/Squares.svelte';
</script>

<Squares />

场景2：无法修改SVG源文件 #

若不能改动原SVG文件，可通过Svelte的Action动态绑定事件，无需侵入SVG源码：

在+page.svelte中编写如下代码：

<script>
  import squares from '$lib/images/asset1.svg';

  // 自定义Action：为SVG内带ID的rect绑定点击事件
  function bindRectClicks(node) {
    // 选中所有带ID的rect元素
    const targetRects = node.querySelectorAll('rect[id]');
    
    // 为每个rect添加点击监听
    targetRects.forEach(rect => {
      rect.addEventListener('click', handleRectClick);
    });

    // 组件销毁时清理事件监听，避免内存泄漏
    return {
      destroy() {
        targetRects.forEach(rect => {
          rect.removeEventListener('click', handleRectClick);
        });
      }
    };
  }

  function handleRectClick(e) {
    const targetId = e.target.id;
    // 处理点击逻辑
    console.log(`点击了元素：${targetId}`);
  }
</script>

<!-- 将Action应用到SVG组件上 -->
<squares use:bindRectClicks />

方案对比 #

• 场景1的组件化方案是最优选择，事件绑定清晰，便于后续扩展样式或逻辑，完全符合Svelte的设计理念。
• 场景2的Action方案适合无法修改SVG源的场景，代码简洁且能自动处理事件的挂载与清理。

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