如何使用 SVG 图案将图像添加到悬停时的 D3 圆圈？

使用图案将图像添加到 D3 圆圈

尝试将图像添加到 D3 中的现有圆圈时，图像无法添加尽管使用简单的填充属性时会呈现圆形并响应鼠标悬停事件，但悬停后仍显示。

要解决此问题，可以使用以下方法：在 SVG 中使用模式是必要的。该图案定义了图像的定位和缩放。下面是一个示例：

<svg>

在 D3 中，您可以修改圆圈的填充以使用以下模式：

svg.append("circle")
  .attr("class", "logo")
  .attr("cx", 225)
  .attr("cy", 225)
  .attr("r", 20)
  .style("fill", "transparent") // Make the circle transparent to display the image
  .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");
  });

此代码将一个圆圈附加到 SVG 并将其填充样式设置为是透明的，使图案中的图像可见。将鼠标悬停在圆圈上会更改填充以显示图像，而鼠标移开会将填充设置回透明。

以上是如何使用 SVG 图案将图像添加到悬停时的 D3 圆圈？的详细内容。更多信息请关注PHP中文网其他相关文章！