SVG交互

发表于 更新于 分类于 ， ， ， 阅读次数：

本篇以一个可点击的 SVG 按钮案例，演示用户事件处理与状态切换。

三、实际交互案例：SVG 按钮

  • 示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
<svg width="160" height="60" xmlns="http://www.w3.org/2000/svg">
  <rect id="btn" x="20" y="10" width="120" height="40" rx="10" fill="#FFD54F" stroke="#FFA000" stroke-width="3" />
  <text x="80" y="38" font-size="20" fill="#333" text-anchor="middle" pointer-events="none">点击我</text>
  <script><![CDATA[
    const btn = document.getElementById('btn');
    let flag = true;
    btn.addEventListener('click', function() {
      btn.setAttribute('fill', flag ? '#4FC3F7': '#FFD54F');
      flag = !flag;
    });
  ]]></script>
  
</svg>
  • 成品展示：
点击我

小结

该案例演示了在 SVG 中处理点击事件与简单状态切换的基本方法，可拓展为图标按钮、切换开关等组件。