如何在react中动态修改已有的SVG？

import React, { useState } from 'react';

const DynamicSVG = () => {
  const [color, setColor] = useState('blue');

  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill={color} />
      <button onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}>
        Change Color
      </button>
    </svg>
  );
};

export default DynamicSVG;

import React from 'react';

const Circle = ({ cx, cy, r, fill }) => (
  <circle cx={cx} cy={cy} r={r} fill={fill} />
);

const DynamicSVG = () => {
  const [color, setColor] = useState('blue');

  return (
    <svg width="100" height="100">
      <Circle cx="50" cy="50" r="40" fill={color} />
      <button onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}>
        Change Color
      </button>
    </svg>
  );
};

export default DynamicSVG;

import React, { useState } from 'react';

const DynamicSVG = () => {
  const [color, setColor] = useState('blue');

  return (
    <>
      <img
        src="/path/to/your/svg.svg"
        alt="Dynamic SVG"
        style={{ filter: `hue-rotate(${color === 'blue' ? 0 : 180}deg)` }}
      />
      <button onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}>
        Change Color
      </button>
    </>
  );
};

export default DynamicSVG;

import React, { useState, useEffect } from 'react';

const DynamicSVG = () => {
  const [color, setColor] = useState('blue');

  useEffect(() => {
    // 可以在这里进行一些副作用操作
  }, [color]);

  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill={color} />
      <button onClick={() => setColor(color === 'blue' ? 'red' : 'blue')}>
        Change Color
      </button>
    </svg>
  );
};

export default DynamicSVG;