这里：
1.我将<a xlink:href=""更改为<a href=""，因为xlink:href与this link一样不推荐使用。它的优点是现在我们可以像这样使用querySelectorAll来获取目标元素
1.在我们获得taget <a>元素之后，我们使用item.querySelectorAll(":scope > rect");来定位其子元素，在本例中是<rect>元素。然后，使用item.classList.add("red")向其添加一个类。red是一个将不透明度变为1的类，因此长方体变为红色。

<style>
  .table_number {
    fill: red;
   opacity: 0;
  }
  
  .red {
    opacity: 1;
  }
  
</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 540 159">
  <image width="540" height="159" xlink:href="https://cdn.shopify.com/s/files/1/0573/4478/6617/files/tables_number.png">       </image>
  <a href="https://www.store.com/products/link1">
    <rect class="table_number" x="46" y="54" width="86" height="70"></rect>
  </a>
  <a href="https://www.store.com/products/link2">
    <rect class="table_number" x="171" y="56" width="84" height="69"></rect>
  </a>
  <a href="https://www.store.com/products/link3">
    <rect class="table_number" x="292" y="59" width="82" height="65"></rect>
  </a>
  <a href="https://www.store.com/products/link4">
    <rect class="table_number" x="408" y="59" width="85" height="70"></rect>
  </a>
</svg>

<script>
  getData();

  async function getData(){
    // const response= await fetch('myurl')
    // console.log(response);

    // mock response variable
    const response = {
      "documents": [
        {
          "_id": "646fd0fbe269fac6c8374c9e",
          "id": "gid://Product/7592907636921",
          "status": false,
          "url": "https://www.store.com/products/link1"
        },
      ]
    }

    // Help here
    response.documents.map(data => {
      // Find <a> elements with the href attribute equals data url
      const ALinks = document.querySelectorAll(`[href="${data.url}"]`);
      ALinks.forEach((item) => {
        let allChildren = item.querySelectorAll(":scope > rect");
         allChildren.forEach((item) => item.classList.add("red"));
      });
    })
  }
</script>