Vue 2 使用v-if条件渲染SVG按钮时@click事件回调未注册问题

这是Vue 2处理SVG命名空间时的典型边界问题，和你的业务逻辑无关：

• 当v-if绑定动态响应式变量时，节点属于运行时动态patch的动态节点，Vue在创建这类SVG子元素时，会丢失父级SVG的命名空间上下文，没有使用SVG专用的createElementNSAPI创建节点，而是通过普通HTML元素的创建方法生成节点。
• 这类节点虽然视觉上能在SVG画布中正常渲染，但不被浏览器的SVG事件命中管线识别为可交互目标：点击按钮时，浏览器的坐标命中逻辑不会把这个节点判定为事件触发源，所以绑定在上面的@click回调根本不会被调用。
• 两种对照测试的表现完全符合这个逻辑：
  • 移除v-if时，节点和SVG容器在首次渲染时同步创建，编译阶段就能静态识别SVG上下文，生成的是标准SVG命名空间节点，事件命中正常。
  • 写死v-if="true"时，Vue编译阶段会把这类恒真条件的节点标记为静态节点，首次渲染时和SVG容器一同创建，同样生成标准SVG节点，事件正常。

• 优先替换为v-show实现显隐控制：把<g transform="translate(30,30)" v-if="showControls">改成<g transform="translate(30,30)" v-show="showControls">。
  • 这个方案不需要改动任何业务逻辑，v-show仅通过控制元素的CSSdisplay属性实现显隐，不会动态销毁重建DOM节点，所有按钮元素从首次渲染开始就是标准SVG命名空间节点，事件绑定、命中逻辑完全正常，完美匹配你原本“鼠标移入显示控件、移出隐藏”的交互需求。
• 如果确实需要用v-if的节点销毁能力（比如控件组体积较大需要及时释放资源），可以升级到修复了SVG动态命名空间传递问题的Vue 2.7+版本，运行时动态创建的SVG元素会自动携带正确的命名空间上下文，事件逻辑就会恢复正常。

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