在 React 中单击时动态更改 SVG 类的颜色？

Question

我有一个 React 组件，其中包括一个颜色选择器和一个具有不同区域的 SVG，这些区域可以彼此独立地填充。我的目标是能够单击颜色选择器中的一种颜色，然后单击 SVG 的一个区域，然后在该区域中填充所选颜色。

这是我的组件代码

import React, { useState } from "react";

import { GithubPicker } from "react-color";

//components

import "./css/CustomCreation.css";

function CustomCreation() {

  const [color, setColor] = useState("");

  const colorList = ["#000000", "#ffffff", "#ff0000"];

  return (

    <div>

      <div>

        <GithubPicker

          colors={colorList}

          color={color}

          onChange={(updatedColor) => setColor(updatedColor.hex)}

          width="100px"

        />

        <div>You selected {color}</div>

      </div>

      <svg

        version="1.0"

        xmlns="http://www.w3.org/2000/svg"

        width="200"

        viewBox="0 0 370.000000 1000.000000"

        preserveAspectRatio="xMidYMid meet"

      >

        <g transform="translate(0.000000,1000.000000) scale(0.100000,-0.100000)">

          <g className="outline">

            <path

              id="outline"

              fill="black"

            />

          </g>

          <g className="headwear">

            <path

              id="cap"

            />

            <path

              id="brim"

            />

          </g>

          <g className="skin">

            <path

              id="face"

            />

            <path

              id="wrist"

            />

          </g>

          <g className="top">

            <path

              id="top"

            />

          </g>

          <g className="pants">

            <path

              id="pants"

            />

          </g>

          <path

            class="gap"

            id="gap"

            fill="white"

          />

          <g className="shoes">

            <path

              id="rightshoe"

            />

            <path

              id="leftshoe"

            />

          </g>

        </g>

      </svg>

    </div>

  );

}

export default CustomCreation;

如果我像这样改变一行

<g className="headwear" fill={color}>

相应的className将成功填充为选择的颜色。

有什么办法可以让标签中的 onClick 发挥作用？

Answer 1

我不知道这是否符合你的需要，但看看我的代码和框https://codesandbox.io/s/amazing-greider-kdjoc我所做的是声明一个新colors变量，它将所有类名作为属性保存。然后在每个 g 标签上我放置如下代码：&nbsp; &nbsp; &nbsp; <g&nbsp; &nbsp; &nbsp; &nbsp; className="top"&nbsp; &nbsp; &nbsp; &nbsp; fill={colors.top ? colors.top : "black"}&nbsp; &nbsp; &nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setColors({ ...colors, top: color });&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; >我的沙箱有这种方法用于top和pantsg 标签。您当然也可以填充所有其他人。我只是想告诉你我是如何让它发挥作用的。

Answer 2

当然。<g&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;className="headwear" &nbsp;&nbsp;&nbsp;&nbsp;fill={color} &nbsp;&nbsp;&nbsp;&nbsp;onClick={()&nbsp;=>&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setColor("#FF0000"); &nbsp;&nbsp;&nbsp;&nbsp;}}&nbsp; >&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;...&nbsp; </g>我建议为g标签创建一个功能性的反应组件来管理onClick&nbsp;颜色状态。