请教各位有经验的前端，svg包含image、text、tspan、use等标签，如何转存为canvas后再转存为图片

        <svg
          width="100%"
          height="100%"
          class="svg-box"
          ref="productImg"
          xmlns='http://www.w3.org/2000/svg'
        >
          <defs>
            <filter x="-0.05" y="-0.05" width="1.1" height="1.1" id="bg">
              <feFlood flood-color="#fff"></feFlood>
            </filter>
          </defs>
          <rect ref="rectFill" x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
          <g>
            <rect x="0" y="0" class="print-area"></rect>
          </g>

          <!--产品图片-->
          <g>
            <image :xlink:href="productImage.url" x="0" y="0" width="100%" height="100%" ref="svgProductImage"></image>
          </g>

          <g v-show="isGShow" transform="translate(290, 250)" fill='#FFFFFF'>
            <rect v-show="productImageList[productNum].addDiyList" :width="productImage.rectW" :height="productImage.rectH" class="print-area" ref="gElement"></rect>

           <g :transform="item.text ? gTextFatherXYRotate : gImgFatherXYRotate" :style="item.text ? gTextFatherOrigin : gImgFatherOrigin" @mousedown.stop="" ref="gZoom" id="gZoom" v-drag>

<!--传入图片显示-->
<g v-show="item.url" transform="translate(0, 0)">
  <image
    :style="'width:' + imgW + 'px;height:' + imgH + 'px'"
    :xlink:href="item.url"
  ></image>
</g>

<!--传入文字显示-->
<g v-show="item.text">
  <text
    ref="tspan"
    text-rendering="geometricPrecision"
    letter-spacing="0px"
    id="svgContainer"
  >
    <tspan
      x="0"
      :y="tspanFontSize"
      :font-size="tspanFontSize"
      fill="#FFFFFF"
      font-weight="normal"
      font-style="normal"
      text-anchor="start"
      font-family="sprdfont_5_15"
      style="user-select: none; white-space: pre"
    >
      {{ item.text }}
    </tspan>
  </text>
</g>

<!--按钮-->
<g>
  <rect
    x="0"
    y="0"
    :style="item.text ? gTextRectWH : gImgRectWH"
    class="print-area move"
    @click="clickDiyItem(item)"
  ></rect>
  <!--居中按钮-->
  <g
    transform="translate(-20, -20)"
    @click="centerText(item)"
    class="pointer"
  >
    <rect x="0" y="0" width="20" height="20"></rect>
    <svg width="20px" height="20px" class="icon" aria-hidden="true">
      <use xlink:href="#icon-jueduijuzhong"></use>
    </svg>
  </g>
  <!--旋转按钮-->
  <g :transform="item.text ? gTextIconRotateXY : gImgIconRotateXY" @mousedown.stop="" @mousedown="rotateDiy($event)" class="pointer">
    <rect x="0" y="0" width="20" height="20"></rect>
    <svg width="20px" height="20px" class="icon" aria-hidden="true">
      <use xlink:href="#icon-xuanzhuan"></use>
    </svg>
  </g>
  <!--删除按钮-->
  <g :transform="item.text ? gTextIconDelXY : gImgIconDelXY" @click="delDiy(item.id)" class="pointer">
    <rect x="0" y="0" width="20" height="20"></rect>
    <svg width="20px" height="20px" class="icon" aria-hidden="true">
      <use xlink:href="#icon-del"></use>
    </svg>
  </g>
  <!--放大按钮-->
  <g
    :transform="item.text ? gTextIconZoomXY : gImgIconZoomXY"
    @mousedown.stop=""
    @mousedown="enlargeText($event,item)"
    class="se-resize"
  >
    <rect x="0" y="0" width="20" height="20"></rect>
    <svg width="20px" height="20px" class="icon" aria-hidden="true">
      <use xlink:href="#icon-fangda"></use>
    </svg>
  </g>
</g>

          </g>
        </svg>
      </div>