将 onClick 事件添加到 java 脚本类中的 svg 元素答案

【问题标题】：Adding an onClick event to an svg element in a java script class将 onClick 事件添加到 java 脚本类中的 svg 元素
【发布时间】：2022-01-21 01:52:57
【问题描述】：

我正在尝试将 onClick 事件添加到 svg 标记，我希望它可以将我引导到另一个页面，即 page2.html。我真的尝试了一切，但我找不到解决方案。如果除了使用 onClick 之外还有另一种方法，那就太好了3 非常感谢您的帮助。这是我的代码：-

import React from "react";
import "./HeaderBox.css";
import "./HeaderBox.scss";
import { Card } from "react-bootstrap";

const HeaderBox = () => {
  return (
    <Card id="Header">
      <button>page</button>
      <div class="HeaderDiv">Omar Fares</div>
      <svg viewBox="45 60 400 320" xmlns="http://www.w3.org/2000/svg">
        <path
          fill="#fff"
          d="M 90 210 C 90 180 90 150 90 150 C 150 150 180 150 180 150 C 180 150 300 150 300 150 C 300 150 330 150 390 150 C 390 150 390 180 390 210 C 390 240 390 270 390 270 C 330 270 300 270 300 270 C 300 270 180 270 180 270 C 180 270 150 270 90 270 C 90 270 90 240 90 210"
          mask="url(#knockout-text)"
        ></path>
        <mask id="knockout-text">
          <rect width="100%" height="100%" fill="#fff" x="0" y="0" />
          <text x="147" y="227" fill="#000">
            Memory
          </text>
        </mask>
        <a onClick="window.location.href='page2.html'"></a>
      </svg>
      
    </Card>
  );
};
export default HeaderBox;

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

在 React 中，你需要为 onClick 分配一个函数

 onClick={() => window.location.href='page2.html'}

【讨论】：