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

qnyhuwrf  于 2022-12-03  发布在  React
关注(0)|答案(2)|浏览(212)

我为一个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;
rsaldnfx

rsaldnfx1#

您是否尝试过用另一个标记(如divspan) Package svg,并将onClick附加到该 Package 上?此外,在setActive()内部,您应该传递true而不是false

sc4hvdpw

sc4hvdpw2#

你可以像Alexader说的那样在另一个标签中扭曲SVG,同样如果SVG有一个孩子,你可以直接将事件传递给那个孩子,它会工作。但是你应该知道浏览器兼容性检查这个链接来自MDN web Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/onclick

相关问题