Wie füge ich beim Hover mithilfe von SVG-Mustern ein Bild zu einem D3-Kreis hinzu?

Hinzufügen eines Bildes zu einem D3-Kreis mithilfe von Mustern

Beim Versuch, ein Bild zu einem vorhandenen Kreis in D3 hinzuzufügen, schlägt das Bild fehl Anzeige nach dem Schweben, obwohl der Kreis gerendert wird und auf Mouseover-Ereignisse reagiert, wenn einfache Füllattribute verwendet werden.

Um dieses Problem zu beheben, ist Folgendes erforderlich Verwenden Sie ein Muster im SVG. Das Muster definiert die Positionierung und Skalierung des Bildes. Hier ist ein Beispiel:

<svg>

In D3 können Sie dann die Füllung des Kreises ändern, um das Muster zu verwenden:

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

Dieser Code hängt einen Kreis an die SVG-Datei an und formatiert seine Füllung entsprechend transparent sein, damit das Bild des Musters sichtbar ist. Wenn Sie mit der Maus über den Kreis fahren, wird die Füllung so geändert, dass das Bild angezeigt wird, während bei gedrückter Maustaste die Füllung wieder transparent wird.

Das obige ist der detaillierte Inhalt vonWie füge ich beim Hover mithilfe von SVG-Mustern ein Bild zu einem D3-Kreis hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!