Comment ajouter une image à un cercle D3 en survol à l'aide de modèles SVG ?

Ajout d'une image à un cercle D3 à l'aide de modèles

Lorsque vous tentez d'ajouter une image à un cercle existant dans D3, l'image ne parvient pas à s'afficher après le survol, malgré le rendu du cercle et la réponse aux événements de survol de la souris lors de l'utilisation d'attributs de remplissage simples.

Pour résoudre ce problème, il est nécessaire de utiliser un modèle dans le SVG. Le motif définit le positionnement et la mise à l'échelle de l'image. Voici un exemple :

<svg>

Dans D3, vous pouvez ensuite modifier le remplissage du cercle pour utiliser le motif :

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

Ce code ajoute un cercle au SVG et stylise son remplissage en fonction de être transparent, permettant à l'image du motif d'être visible. Le survol du cercle modifie le remplissage pour afficher l'image, tandis que le retrait de la souris rétablit le remplissage transparent.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!