Wie wende ich mit CSS Farbverläufe auf SVG-Elemente an?

Anwenden von Farbverläufen auf SVG-Elemente mit CSS

Die Implementierung eines Farbverlaufs auf ein SVG-Rect-Element erfordert die Verwendung von CSS in Verbindung mit den leistungsstarken Farbverlaufsfunktionen von SVG. Das Attribut „fill“ des Elements „rect“ ermöglicht die Anwendung eines Farbverlaufs.

Um einen linearen Farbverlauf zu erstellen, fügen Sie die folgende CSS-Regel zu Ihrem Stylesheet hinzu:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

Definieren Sie nun in der SVG-Datei der lineare Gradient mit dem und Elemente:

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>

Hier erstreckt sich der Farbverlauf von #F60 bei 5 % bis #FF6 bei 95 % entlang der Länge des Elements. Sie können die Farben und Offset-Prozentsätze anpassen, um den Farbverlauf anzupassen.

Abschließend referenzieren Sie den Farbverlauf mithilfe des Füllattributs im Rect-Element:

<rect width="100" height="50" fill="url(#MyGradient)"/>

Mit diesem Ansatz können Sie schöne und ... Dynamische Farbverläufe für Ihre SVG-Elemente mithilfe von CSS, wodurch die visuelle Attraktivität und Benutzererfahrung Ihrer Webanwendungen verbessert wird.

Das obige ist der detaillierte Inhalt vonWie wende ich mit CSS Farbverläufe auf SVG-Elemente an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!