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 중국어 웹사이트의 기타 관련 기사를 참조하세요!