如何通過 typescript 點擊更改 svg 文件的顏色？

Question

我需要通過 typescript 單擊更改顏色 svg 文件，這是我的 HTML 代碼，請幫助我

<svg xmlns="http://www.w3.org/2000/svg" id="Timer" width="20" height="20" viewBox="0 0 24 24" class="Timer">
<defs>
    <style>
        .cls-3{fill:none}.cls-4{fill:#200e32}
        .Timer {fill:#da005f}
    </style>
</defs>
<path id="Rectangle_477" d="M0 0H24V24H0z" class="cls-3"/>
<path id="Subtraction_13" d="M9.5 19a9.5 9.5 0 1 1 0-19 9.5 9.5 0 0 1 6.72 16.22A9.439 9.439 0 0 1 9.5 19zm0-17.5a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8z" class="cls-4" transform="translate(2.5 4)"/>
<path id="Path" d="M4.446 8.446a.727.727 0 0 1-.371-.1L.352 6.118A.714.714 0 0 1 0 5.51V.713a.713.713 0 0 1 1.425 0V5.1l3.382 2.016a.715.715 0 0 1 .247.979.7.7 0 0 1-.608.351z" class="cls-4" transform="translate(10.955 8.684)"/>
<path id="Line_106" d="M0 0L0 5" class="cls-3" transform="rotate(90 6.25 8.25)"/>
<circle id="Ellipse_77" cx="1" cy="1" r="1" class="cls-4" transform="translate(20 4)"/>
<circle id="Ellipse_88" cx="1" cy="1" r="1" class="cls-4" transform="translate(20 4)"/>
<rect id="Rectangle_509" width="7" height="2" class="cls-4" rx="1" transform="translate(8.5 1)"/>

Answer 1

能夠做到這一點

第 1 步：將 SVG 轉換為組件

第 2 步：單擊時將您預期的顏色作為道具發送到組件。

第 3 步：更改所有 class，如下所述

第 4 步：使用 SVG 中所需的顏色道具。

const MYSVGComponent = ({
    cls4Color = "#200e32",
    cls3Color = "none",
    timerColor = "#da005f"
  }) => {
    const cls3 = { fill: cls3Color };
    const [cls4, setCls4] = useState({ fill: cls4Color });
    const Timer = { fill: timerColor };

    const handleClick = () => {
      setCls4({ fill: "red" });
    };

    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        id="Timer"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        style={Timer}
        onClick={handleClick}
      >
        <path id="Rectangle_477" d="M0 0H24V24H0z" style={cls3} />
        <path
          id="Subtraction_13"
          d="M9.5 19a9.5 9.5 0 1 1 0-19 9.5 9.5 0 0 1 6.72 16.22A9.439 9.439 0 0 1 9.5 19zm0-17.5a8 8 0 1 0 8 8 8.009 8.009 0 0 0-8-8z"
          style={cls4}
          transform="translate(2.5 4)"
        />
        <path
          id="Path"
          d="M4.446 8.446a.727.727 0 0 1-.371-.1L.352 6.118A.714.714 0 0 1 0 5.51V.713a.713.713 0 0 1 1.425 0V5.1l3.382 2.016a.715.715 0 0 1 .247.979.7.7 0 0 1-.608.351z"
          style={cls4}
          transform="translate(10.955 8.684)"
        />
        <path
          id="Line_106"
          d="M0 0L0 5"
          style={cls3}
          transform="rotate(90 6.25 8.25)"
        />
        <circle
          id="Ellipse_77"
          cx="1"
          cy="1"
          r="1"
          style={cls4}
          transform="translate(20 4)"
        />
        <circle
          id="Ellipse_88"
          cx="1"
          cy="1"
          r="1"
          style={cls4}
          transform="translate(20 4)"
        />
        <rect
          id="Rectangle_509"
          width="7"
          height="2"
          style={cls4}
          rx="1"
          transform="translate(8.5 1)"
        />
      </svg>
    );
  };

這是工作示例 - https://codesandbox.io/s/so-70052075-4em9l