Bagaimana untuk Menambah Imej pada Bulatan D3 pada Hover Menggunakan Corak SVG?

Menambah Imej pada Bulatan D3 Menggunakan Corak

Apabila cuba menambah imej pada bulatan sedia ada dalam D3, imej gagal paparan selepas melayang, walaupun bulatan memaparkan dan bertindak balas kepada peristiwa alih tetikus apabila menggunakan atribut isian mudah.

Untuk menyelesaikan masalah ini, ia adalah perlu untuk menggunakan corak dalam SVG. Corak mentakrifkan kedudukan dan penskalaan imej. Berikut ialah contoh:

<svg>

Dalam D3, anda kemudian boleh mengubah suai isian bulatan untuk menggunakan corak:

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");
  });

Kod ini menambahkan bulatan pada SVG dan menggayakan isiannya kepada telus, membolehkan imej daripada corak kelihatan. Melayang di atas bulatan menukar isian untuk memaparkan imej, manakala tetikus keluar menetapkan isian kembali kepada lutsinar.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Imej pada Bulatan D3 pada Hover Menggunakan Corak SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!