Heim >Web-Frontend >CSS-Tutorial >Wie wende ich Farbverläufe auf SVG-Rechtecke in CSS an?

Wie wende ich Farbverläufe auf SVG-Rechtecke in CSS an?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-03 03:18:29622Durchsuche

How to Apply Gradients to SVG Rectangles in CSS?

SVG-Verläufe in CSS

Bei dieser Frage geht es darum, einen Verlauf auf das -Element einer SVG-Datei anzuwenden. Im folgenden Abschnitt wird erläutert, wie Sie diese Funktionalität in CSS implementieren.

Verwendung des Füllattributs

Derzeit verwenden Sie das Füllattribut, um eine Volltonfarbe für das -Element festzulegen. Während dies zum Festlegen einer einzelnen Farbfüllung gut funktioniert, funktioniert es bei Farbverläufen nicht so gut.

Verläufe verwenden

Um einen linearen Farbverlauf anzuwenden, müssen Sie mit der Funktion url() auf die in SVG definierte Farbverlaufsdefinition verweisen. In CSS lautet die Syntax:

fill: url(#gradient-id);

wobei #gradient-id die ID ist, die Sie für den Farbverlauf in SVG definiert haben.

Beispiel

Der folgende Code zeigt, wie man Wenden Sie einen linearen Farbverlauf auf das Element an:

CSS

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

SVG

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    rect {
      fill: url(#MyGradient);
    }
  </style>
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>

  <rect width="100" height="50" />
</svg>

Dadurch wird ein erstellt Farbverlauf von Rot (Horizontaler Farbverlauf von #F60) nach Orange (#FF6), angewendet auf Element.

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

Stellungnahme:
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