Javascript 使用粒子效果d3时加快图像加载速度

我正在尝试制作一个粒子效果，它跟随用户的鼠标四处移动。如果我不包括图像，它工作得非常好，但是一旦我添加图像，它会非常慢。我试着找出如何以不同的方式定义图像，或者使用def，但无法使其他任何东西起作用

西德尔

该图像与应用程序位于同一路径中，大小为1.2kb

<svg id="mySvg" width="40" height="40">
    <defs id="mdef">
        <pattern id="image" x="0" y="0" height="40" width="40">    
            <image x="0" y="0" width="40" height="40" xlink:href="image.png"></image>    
        </pattern>
    </defs>
</svg>

---

如何处理图像加载以便更快？

这不是图像加载，而是确定圆的填充。如果你只是使用一个图像，它会表现得更好：@Mark谢谢你这么做了！

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", particle);


function particle() {

    var m = d3.mouse(this);

    svg.append("circle")
        .attr("cx", m[0])
        .attr("cy", m[1])
        .attr("r", 1e-6)
        .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
        .style("stroke-opacity", 1)
        .style("fill", "url(#image)")
        .transition()
        .duration(2000)
        .ease(Math.sqrt)
        .attr("r", 40)
        .style("stroke-opacity", 1e-6)
        .remove();

    d3.event.preventDefault();
}