Heim  >  Artikel  >  Web-Frontend  >  Wie wende ich mit CSS lineare Farbverläufe auf SVG-Rect-Elemente an?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 17:13:02562Durchsuche

How to Apply Linear Gradients to SVG Rect Elements Using CSS?

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!

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