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

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>
      <stop offset="95%" stop-color="#FF6"></stop>
    </lineargradient>
  </defs>

  <rect width="100" height="50"></rect>
</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!