CODEWITHSUNDEEP
reactjssvg
tinaa
tinaa

Reputation: 53

How to apply onClick event on Svg file on React?

I made a component for a Svg and I'm trying to apply onClick event so I change the state, but it doesnt work for some reason, I'm not sure what I'm doing wrong. I tried applying the onCLick on too , but it doesnt work either.

my code

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;

Upvotes: 0

Views: 7738

Answers (2)

Gharieb khalifa
Gharieb khalifa

Reputation: 1

you can warp the SVG in another tag as Alexader says, also you can pass the event to the child element in the SVG tag directly and it will work. but you should be aware of the browser compatibility check this link from MDN web Docs https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/onclick for example, this is an SVG delete icon

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>
  )
}

when you call it just <Delete onClick={yourEvent} /> the onClick will apply on the <path/> tag

Upvotes: 0

Alexander Matev
Alexander Matev

Reputation: 41

Have you tried wrapping the svg with another tag like a div or span and attaching the onClick on that wrapper ? Also inside the setActive() you should pass true instead of false.

Upvotes: 2

Related Questions