如何在 React 上的 Svg 文件上应用 onClick 事件？

Question

我为 Svg 制作了一个组件，我正在尝试应用 onClick 事件，因此我更改了状态，但由于某种原因它不起作用，我不确定我做错了什么。我也试过应用 onCLick，但它也不起作用。

我的代码

import React, { useState } from "react";
import './style.scss'

const AverageSvg=() => {
  const [active, setActive] = useState(false);

  return (
    
    <svg className="average"  onClick={() => setActive(false)} 
      xmlns="http://www.w3.org/2000/svg"
      width="170.539"
      height="51.974"
      viewBox="0 0 170.539 51.974"
    >
      <g data-name="The average" transform="translate(-1223 -2501)" >
        <g className={active ? "clicked-fill" : "fill "} 
          // fill="none"
          stroke="#707070"
          strokeWidth="1"
          data-name="Rectangle 60"
          transform="translate(1223 2501)"
        >
          <rect 
            width="170.539"
            height="51.974"
            stroke="none"
            rx="25.987"
          ></rect>
          <rect
            width="169.539"
            height="50.974"
            x="0.5"
            y="0.5"
            rx="25.487"
          ></rect>
        </g>
        <text className="text"
          // fill="#464646"
          data-name="The average"
          fontFamily="ArialMT, Arial"
          fontSize="17"
          transform="translate(1261 2532)"
        >
          <tspan x="0" y="0" >
            The average
          </tspan>
        </text>
      </g>
    </svg>
    
  );
}

export default AverageSvg;

Answer 1

您是否尝试过用另一个标签包装 svg，例如 div 或 span 并将 onClick 附加到该包装器上？ 同样在setActive() 中，您应该传递true 而不是false。

Answer 2

您可以像 Alexader 所说的那样在另一个标签中扭曲 SVG，也可以将事件直接传递给 SVG 标签中的子元素，它会起作用。但你应该知道浏览器的兼容性 从 MDN web Docs 检查这个链接 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/onclick 例如，这是一个 SVG 删除图标

export const Delete = ({ ...props }) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" className={props?.className} >
      <path onClick={props?.onClick} d="M7 21q-.825 0-1.412-.587Q5 19.825 5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413Q17.825 21 17 21Zm2-4h2V8H9Zm4 0h2V8h-2Z" />
    </svg>
  )
} 

当你称它为<Delete onClick={yourEvent} /> onClick 将应用于 <path/> 标签