Wie wendet man mit CSS einen linearen Farbverlauf auf ein SVG-Rechteck an?

So wenden Sie mit CSS einen linearen Farbverlauf auf ein SVG-Rechteck an

Das Anwenden eines Farbverlaufs auf ein SVG-Element ist eine häufige Aufgabe in der Webentwicklung. In diesem Artikel erfahren Sie, wie Sie mit CSS einen linearen Farbverlauf auf ein SVG-Rechteck anwenden.

Verstehen der Farbverlaufssyntax

In CSS wird ein linearer Farbverlauf mithilfe des Hintergrundbilds definiert Eigentum. Die Syntax lautet wie folgt:

<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>

• Richtung: Gibt die Richtung an, in die der Farbverlauf fließt. Zu den gängigen Werten gehören „nach oben“, „nach unten“, „nach links“ und „nach rechts“.
• color-stop: Stellt einen Punkt auf der Verlaufslinie dar, an dem eine bestimmte Farbe definiert ist. Er wird als Prozentwert zwischen 0 % und 100 % ausgedrückt. Es können mehrere Farbstopps definiert werden, jeder mit einer anderen Farbe und Position.

Anwenden des Farbverlaufs

Um den Farbverlauf auf ein SVG-Rechteck anzuwenden, können Sie die Fill-Eigenschaft verwenden. Geben Sie einfach den linear-gradient()-Wert als Wert für die Füllung an. Zum Beispiel:

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: linear-gradient(to right, #F60 5%, #FF6 95%);
}</code>

Definieren des Farbverlaufs im SVG

Im SVG-Dokument selbst können Sie den Farbverlauf mithilfe der Funktion definieren. Element. Dieses Element wird normalerweise innerhalb des platziert. Abschnitt. Zum Beispiel:

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

Im obigen Beispiel wird der Farbverlauf mit zwei Farbstopps definiert: einer bei 5 % mit der Farbe #F60 und der andere bei 95 % mit der Farbe #FF6. Das id-Attribut stellt eine eindeutige Kennung für den Farbverlauf bereit, mit der Sie ihn im CSS referenzieren können.

Referenzieren des Farbverlaufs in CSS

Im CSS können Sie den definierten Farbverlauf mithilfe von referenzieren url()-Funktion:

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>

Dadurch wird der im definierte Farbverlauf angewendet. Element zum SVG-Rechteck.

Vollständiges Beispiel

Hier ist ein vollständiges Beispiel für die Anwendung eines linearen Farbverlaufs auf ein SVG-Rechteck:

<code class="svg"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%" stop-color="#F60" />
            <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
    </defs>

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

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
}</code>

Anwenden Ein linearer Farbverlauf zu einem SVG-Rechteck mithilfe von CSS ist eine leistungsstarke Technik, die die visuelle Attraktivität Ihrer Designs verbessern kann. Durch die Verwendung der Eigenschaft „fill“ und des Werts „linear-gradient()“ können Sie Verläufe mit verschiedenen Farben, Richtungen und Deckkraft erstellen.

Das obige ist der detaillierte Inhalt vonWie wendet man mit CSS einen linearen Farbverlauf auf ein SVG-Rechteck an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!