Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Susan Sarandon
Freigeben: 2024-11-04 05:55:29
Original
680 Leute haben es durchsucht

How do you apply a linear gradient to an SVG rectangle using CSS?

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>
Nach dem Login kopieren
  • 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren
<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
}</code>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage