正如Lars所说，您需要使用模式，一旦完成，它就会变得非常简单。这是d3Google网上论坛中与此相关对话的链接。
设置模式：
<svg id="mySvg" width="80" height="80"> <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="http://www.e-pint.com/epint.jpg"></image> </pattern> </defs>
然后在d3中，我们仅更改填充：
svg.append("circle") .attr("class", "logo") .attr("cx", 225) .attr("cy", 225) .attr("r", 20) .style("fill", "transparent") .style("stroke", "black") .style("stroke-width", 0.25) .on("mouseover", function(){ d3.select(this) .style("fill", "url(#image)"); }) .on("mouseout", function(){ d3.select(this) .style("fill", "transparent"); });
