如何在使用<use>时更改SVG中克隆元素的ID

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon">
    <path d="M10 10 H 90 V 90 H 10 L 10 10" />
  </symbol>
</svg>

<style>
  /* 使用CSS选择器更改克隆元素的ID */
  use {
    /* 这里不能直接更改ID，但可以通过其他方式间接实现效果 */
  }
</style>

<svg>
  <use xlink:href="#icon" x="10" y="10" />
  <use xlink:href="#icon" x="100" y="10" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon">
    <path d="M10 10 H 90 V 90 H 10 L 10 10" />
  </symbol>
</svg>

<svg>
  <use xlink:href="#icon" x="10" y="10" id="icon1" />
  <use xlink:href="#icon" x="100" y="10" id="icon2" />
</svg>

<script>
  // 使用JavaScript更改克隆元素的ID
  document.querySelectorAll('use').forEach((useElement, index) => {
    useElement.id = `icon${index + 1}`;
  });
</script>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <g id="icon">
    <path d="M10 10 H 90 V 90 H 10 L 10 10" />
  </g>
</svg>

<svg>
  <use xlink:href="#icon" x="10" y="10" id="icon1" />
  <use xlink:href="#icon" x="100" y="10" id="icon2" />
</svg>