Wie wende ich mit CSS lineare Farbverläufe auf SVG-Rect-Elemente an?

Anwenden linearer Farbverläufe auf SVG-Rect-Elemente mit CSS

Um die visuelle Darstellung zu verbessern, versuchen Entwickler oft, lineare Farbverläufe auf SVG-Rect-Elemente anzuwenden Elemente. Diese Frage befasst sich mit der Technik der Verwendung von CSS, um solche Farbverläufe zu erzielen.

CSS-Ansatz

Um über CSS einen linearen Farbverlauf auf ein SVG-Rect-Element anzuwenden, nutzen Sie die Füllung Sie können das Attribut genauso wie das Füllattribut eines anderen Elements verwenden. Es ist wichtig, den linearen Farbverlauf innerhalb der SVG selbst zu definieren.

Betrachten Sie dieses Beispiel:

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

<code class="html"><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></code>

Dieser Code definiert einen linearen Farbverlauf innerhalb der Element und weist es als Füllwert des -Elements zu. Element. Als Ergebnis zeigt das Rechteck die Farbverläufe von #F60 bis #FF6 an.

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