jquery ändert SVG

In der Frontend-Entwicklung ist SVG ein sehr verbreitetes Bildformat. jQuery ist eine sehr beliebte JavaScript-Bibliothek, mit der sich HTML und CSS sowie SVG verarbeiten lassen. In diesem Artikel erfahren Sie, wie Sie mit jQuery die Stile und Eigenschaften von SVG ändern und wie Sie SVG erstellen und einfügen.

1. Verwenden Sie jQuery, um den SVG-Stil zu ändern.

Das Ändern des SVG-Stils kann das Bild lebendiger machen. Sie können auch CSS verwenden, um den SVG-Stil zu ändern. aber verwenden Sie jQuery, um den Stil zu verwalten. Auch sehr praktisch. Es gibt mehrere Möglichkeiten, den SVG-Stil mit jQuery zu ändern.

1. Verwenden Sie die Methode attr()

Die Methode attr() kann die Attribute von SVG ändern, einschließlich Stilattribute. Um beispielsweise die Farbe von SVG zu ändern, können Sie den folgenden Code verwenden:

$("svg path").attr("fill", "red");

2. Verwenden Sie die CSS()-Methode

Tatsächlich können Sie CSS verwenden ()-Methode zum Festlegen des SVG-Stils. Ähnlich wie beim Festlegen des Stils von HTML-Elementen können Sie den folgenden Code verwenden, um den Stil von SVG festzulegen:

$("svg path").css("fill", "red");

3 Verwenden Sie die addClass()-Methode

Durch Hinzufügen von a Wenn Sie den Klassennamen in SVG umwandeln, können Sie das Geschlecht in mehreren Stilen ändern. Um beispielsweise eine Klasse mit dem Namen active zu SVG hinzuzufügen, können Sie den folgenden Code verwenden:

$("svg path").addClass("active");

2. Verwenden Sie jQuery, um die Attribute von SVG

zusätzlich zum Ändern zu ändern Wenn Sie den Stil von SVG verwenden, können Sie auch jQuery verwenden, um SVG-Eigenschaften zu ändern. Hier sind mehrere Möglichkeiten, SVG-Eigenschaften mit jQuery zu ändern.

1. Verwenden Sie die Methode attr()

Die Methode attr() kann die Attribute von SVG ändern, z. B. die Breite und Höhe von SVG Folgender Code: # #

$("svg").attr("width", "100px").attr("height", "100px");

$("svg").prop("viewBox", "0 0 200 200");

var svg = ''; var $svg = $(svg);

$("body").append($svg);

Das obige ist der detaillierte Inhalt vonjquery ändert SVG. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!