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.
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>
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>
Im SVG-Dokument selbst können Sie den Farbverlauf mithilfe der Funktion
<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.
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
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!