image.onload（）未触发事件

Question

我认为这个问题比d3.js部分更关注角度。假定使用此代码，我可以将svg转换为图像并将其放在画布上。问题在于该事件：

  image.onload = (event) => {
    context.drawImage(image, 0, 0);
    DOMURL.revokeObjectURL(url);
  };

它永远不会激活，为什么以及如何修复它？

  ngOnInit() {
      var svg = d3
        .select("#video_container")
        .append("svg")
        .attr("width", 1000)
        .attr("height", 1000);

      var rectangle = svg
        .append("rect")
        .attr("width", 100)
        .attr("height", 70)
        .attr("x", 0)
        .attr("y", 50)
        .attr("fill", "blue")
        .attr("opacity", "1");

      var duration = 5000;
      var posicionFinal = 250;
      var posicionActual = 0;
      var segundosDuracion = 0;
      var oProperties = { x: posicionFinal, fill: "red" };
        rectangle
        .datum(oProperties)
        .transition()
        .duration(duration)
        .ease(d3.easeLinear)
        .attr("x",oProperties.x)
        .attr("fill",oProperties.fill)

    setTimeout(()=>{
  var DOMURL = window.URL || window.webkitURL;
      var canvas = d3
        .select("#canvas_container")
        .append("canvas")
        .attr("width", 1000)
        .attr("height", 1000);

      var context = canvas.node().getContext("2d");
        var svgString = this.domNodeToString(svg.node());
        console.log(svgString);
        var image = new Image();
        var svgBlob = new Blob([svgString], {
          type: "image/svg+xml;charset=utf-8",
        });

        var url = DOMURL.createObjectURL(svgBlob);
    

        image.onload = (event) => {
          context.drawImage(image, 0, 0);
          DOMURL.revokeObjectURL(url);
        };
      
    },5000)

  }

这是我的实时代码：

https://stackblitz.com/edit/d3-angular-h22elk?file=src%2Fapp%2Fapp.component.ts