我有一个问题，通过canvas元素将带有image标签的SVG导出为PNG。如果以前有人问过这个问题，我很抱歉，但我自己找不到相关的问题。
下面的svg和代码示例应该可以更好地解释它，下面是我的SVG（我也尝试在image标签的xlink:href属性中使用URL而不是本地文件，结果相同）：

<svg
  xmlns="http://www.w3.org/2000/svg"
  style="
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    min-width: 250px;
    min-height: 190px;
  "
  viewBox="-100 -100 300 300"
>
  <g>
    <g />
    <g>
      <g style="visibility: visible">
        <image
          x="199"
          y="139"
          width="50"
          height="50"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xlink:href="http://localhost:5173/test.png"
          preserveAspectRatio="none"
          opacity="1"
        />
      </g>
      <g style="">
        <g>
          <foreignObject
            style="overflow: visible; text-align: left"
            pointer-events="none"
            width="100%"
            height="100%"
          >
            <div
              xmlns="http://www.w3.org/1999/xhtml"
              style="
                display: flex;
                align-items: unsafe center;
                justify-content: unsafe center;
                width: 48px;
                height: 1px;
                padding-top: 164px;
                margin-left: 200px;
              "
            >
              <div style="box-sizing: border-box; font-size: 0; text-align: center">
                <div
                  style="
                    display: inline-block;
                    font-size: 14px;
                    font-family: Arial, Helvetica;
                    color: #252b3a;
                    line-height: 1.2;
                    pointer-events: all;
                    white-space: normal;
                    word-wrap: break-all;
                  "
                >
                  Image Test
                </div>
              </div>
            </div>
          </foreignObject>
        </g>
      </g>
    </g>
    <g />
    <g />
  </g>
</svg>

下面是我用来将svgString加载到图像中的代码，并通过HTMLCanvasElement的toDataURL方法将其转换为dataURL：

const img = new Image();
img.onload = () => {
  // Draw the Image object onto the canvas
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);

  const dataURL = canvas.toDataURL(`image/png`);
  // This dataURL does not render my image, even though it is there in the SVG
};

// Setting img's width and height according to prior calculations
img.width = width;
img.height = height;
img.src = `data:image/svg+xml;base64,${window.btoa(svgString)}`;