如何在React中使用SVG图像作为按钮？

方案1：SVG内部添加透明覆盖矩形 #

在SVG的最上层添加一个与viewBox尺寸完全匹配的透明矩形，设置pointer-events="all"来捕获整个区域的点击事件，同时把点击逻辑绑定在SVG或这个矩形上。

import { useState } from 'react';

const ClickableIrregularSVG = () => {
  const handleSVGClick = () => {
    // 这里写你的点击逻辑
    console.log('整个SVG区域被点击');
  };

  return (
    <svg viewBox="0 0 100 100" onClick={handleSVGClick}>
      {/* 你的不规则图形 */}
      <path d="M15,15 L85,15 L50,75 L25,50 Z" fill="#2196F3" />
      {/* 透明覆盖层，确保覆盖整个SVG viewBox范围 */}
      <rect x="0" y="0" width="100" height="100" fill="transparent" pointer-events="all" />
    </svg>
  );
};

export default ClickableIrregularSVG;

方案2：直接给SVG根元素绑定事件并调整内部元素的pointer-events #

如果不需要内部元素单独响应点击，可以直接把点击事件绑在SVG根元素上，同时给内部图形设置pointer-events="none"，确保点击事件不会被内部元素拦截。

const ClickableIrregularSVG = () => {
  const handleClick = () => {
    console.log('SVG被点击');
  };

  return (
    <svg 
      viewBox="0 0 100 100" 
      onClick={handleClick}
      style={{ cursor: 'pointer' }} // 添加鼠标指针样式，提示可点击
    >
      <path 
        d="M15,15 L85,15 L50,75 L25,50 Z" 
        fill="#2196F3"
        pointer-events="none"
      />
    </svg>
  );
};

方案3：用外部容器包裹SVG #

把SVG放在一个尺寸匹配的div容器中，给容器绑定点击事件，同时设置SVG的pointer-events: none，让容器捕获所有点击。这种方法适合需要给SVG添加额外布局样式的场景。

const ClickableIrregularSVG = () => {
  const handleContainerClick = () => {
    console.log('SVG区域被点击');
  };

  return (
    <div 
      style={{ 
        width: '250px', 
        height: '250px', 
        cursor: 'pointer',
        display: 'inline-block'
      }} 
      onClick={handleContainerClick}
    >
      <svg 
        viewBox="0 0 100 100" 
        style={{ width: '100%', height: '100%', pointerEvents: 'none' }}
      >
        <path d="M15,15 L85,15 L50,75 L25,50 Z" fill="#2196F3" />
      </svg>
    </div>
  );
};

注意事项 #

• 确保SVG的viewBox属性正确设置，它决定了SVG的坐标系统，覆盖层或容器的尺寸需要和它对应才能完全覆盖。
• 如果需要内部元素也能响应点击，不要设置pointer-events="none"，而是通过事件冒泡来处理根元素的点击。
• 添加cursor: pointer样式，让用户直观知道这个区域可点击。

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