如何使用 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中文網其他相關文章！