有没有一种方法可以使SVG的使用随后可修改(或使用不同的技术)？

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  <script type="text/javascript">
    <![CDATA[
      window.onload = function() {
        var circle = document.getElementById('myCircle');
        circle.setAttribute('fill', 'red');
      };
    ]]>
  </script>
</svg>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="50" cy="50" r="40" class="circle" />
</svg>

.circle {
  fill: yellow;
  stroke: green;
  stroke-width: 4;
}

document.getElementById('myCircle').style.fill = 'red';

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circle.setAttribute("cx", "50");
circle.setAttribute("cy", "50");
circle.setAttribute("r", "40");
circle.setAttribute("fill", "yellow");
circle.setAttribute("stroke", "green");
circle.setAttribute("stroke-width", "4");
svg.appendChild(circle);
document.body.appendChild(svg);

// 修改SVG元素
circle.setAttribute("fill", "red");

class MySvgComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle id="myCircle" cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4" />
      </svg>
    `;
  }

  setFillColor(color) {
    const circle = this.querySelector('#myCircle');
    circle.setAttribute('fill', color);
  }
}

customElements.define('my-svg', MySvgComponent);

// 使用自定义元素
const mySvg = document.createElement('my-svg');
document.body.appendChild(mySvg);
mySvg.setFillColor('red');

import React, { useState } from 'react';

function SvgComponent() {
  const [fillColor, setFillColor] = useState('yellow');

  return (
    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill={fillColor} stroke="green" strokeWidth="4" />
      <button onClick={() => setFillColor('red')}>Change Color</button>
    </svg>
  );
}

export default SvgComponent;