Wie ändere ich SVG-Farben?

Scalable Vector Graphics (SVG) erfreut sich großer Beliebtheit als Format, mit dem hochwertige Vektorgrafiken erstellt werden können, deren Größe verlustfrei auf jede beliebige Größe geändert werden kann. Ein zusätzlicher Vorteil der Verwendung von SVG ist die Möglichkeit, die Farbe von Grafiken basierend auf bestimmten Vorlieben zu ändern. Wenn Sie den Ton Ihrer Website koordinieren oder die Farbpalette für ein bestimmtes Ziel optimieren möchten, können Sie die Farben einer SVG-Datei einfach mithilfe von CSS ändern. Dieser Artikel führt Sie Schritt für Schritt durch die Änderung der Farben einer SVG-Datei, angefangen bei der Identifizierung bestimmter Elemente bis hin zur Anpassung der Farben selbst. Egal, ob Sie ein Webdesigner, Entwickler oder ein neugieriger Lernender sind, der seine SVG-Grafiken personalisieren möchte, dieser Artikel verspricht, Ihnen das nötige Wissen zu vermitteln, um Ihre Reise zu beginnen.

Verwenden Sie CSS, um SVG-Elemente zu positionieren

CSS steht für Cascading Style Sheets und ist ein einflussreiches Werkzeug zum Gestalten von HTML und kann auch zum Ändern des Stils von SVG-Grafiken verwendet werden. Um die Farbe einer SVG-Datei zu ändern, können Sie CSS-Selektoren verwenden, um genau das Element auszuwählen, das geändert werden muss. Wenn Sie beispielsweise die Füllfarbe aller Pfade in einer SVG-Datei ändern möchten, können Sie die folgende CSS-Regel übernehmen -

svg path {
   fill: red;
}

Dadurch wird die Füllfarbe aller Pfade im SVG in Rot geändert. Sie können CSS auch verwenden, um bestimmte Elemente in SVG nach ID oder Klasse anzusprechen.

SVG-Farbe ändern

Es ist möglich, den Farbton eines SVG-Elements in jeden offiziell autorisierten CSS-Farbton zu ändern, unabhängig davon, ob es sich um ein benutzerdefiniertes Tag für Farbton, Hex-System, RGB, RGBA, HSL, HSLA oder andere zulässige Farbstandards handelt. Beispielsweise können Sie die Farbe innerhalb eines Pfads in einen traditionellen Farbton (z. B. „grün“) oder einen Hexadezimalcode (z. B. „#ff0000“) ändern. Sie können den genauen Farbton auch über einen RGB- oder HSL-Wert angeben, beispielsweise „rgb(255, 0, 0)“ oder „hsl(0, 100 %, 50 %)“. Zusätzlich zum Anpassen des Fülltons eines SVG-Elements können Sie den Strichton auch mithilfe der Eigenschaft „Strich“ anstelle der Eigenschaft „Füllung“ ändern.

SVG-Farben überschreiben

Bitte beachten Sie, dass einige SVG-Dateien möglicherweise Inline-Stile oder fest codierte Farben enthalten, die möglicherweise von Ihnen definierte CSS-Regeln außer Kraft setzen. In diesem Fall muss die SVG-Datei möglicherweise geändert werden, um diese Stile oder Farben zu entfernen. Sie können dies tun, indem Sie die SVG-Datei mit einem Texteditor öffnen und den Farbwert suchen, den Sie ändern möchten. Sobald Sie relevante Stile oder Farben gefunden haben, können Sie diese entfernen oder nach Ihren Wünschen anpassen. Sie müssen jedoch darauf achten, dass Sie keinen wichtigen Code oder Tags entfernen, die die Funktionalität des SVG beeinträchtigen könnten.

Methode

Hier sind die Richtlinien, die Sie befolgen können, um den Farbton Ihrer SVG-Datei zu ändern -

Es ist wichtig, das spezifische SVG-Element zu identifizieren, dessen Farbe Sie ändern möchten. Dies kann erreicht werden, indem Sie die Entwicklertools in Ihrem Webbrowser verwenden, um das SVG-Element zu überprüfen.

Erstellen Sie eine CSS-Deklaration, um den Farbton eines bestimmten SVG-Elements oder mehrerer Elemente zu ändern. Sie können Elementselektoren wie „svg“, „path“ oder „rect“ verwenden, um sich auf bestimmte Elemente zu konzentrieren, oder Klassenselektoren oder ID-Selektoren verwenden, um bestimmte Elemente detaillierter anzusprechen.

In der CSS-Deklaration weisen Sie der Fill-Eigenschaft Ihre bevorzugte Farbe zu, um die Füllfarbe der SVG-Datei zu ändern. Sie können Farben mithilfe von Farbnamen, Hexadezimalcodes oder RGB-Werten darstellen.

Sie haben auch die Möglichkeit, Stricheigenschaften anzugeben, um die Farbe des SVG-Strichs zu ändern, oder andere CSS-Eigenschaften zum Formen des SVG zu verwenden.

Wenn Sie eine externe CSS-Datei verwenden, verwenden Sie das Link-Element im Kopfbereich des HTML-Dokuments, um darauf zu verlinken.

Speichern Sie Ihre Änderungen und aktualisieren Sie die Seite, um die aktualisierten SVG-Farben anzuzeigen.

Beispiel 1

Das folgende Beispiel zeigt, wie man die Farbe einer SVG-Grafik mithilfe von CSS ändert

<!DOCTYPE html>
<html>
<head>
   <title>How to change SVG color?</title>
   <style>
      #my-svg path {
         fill: green;
      }
   </style>
</head>
<body>
   <h4>How to change SVG color?</h4>
   <div>
      <p>Before Color Change</p>
      <svg width="100" height="100">
         <path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
      </svg>
   </div>
   <br>
   <div>
      <p>After Color Change</p>
      <svg id="my-svg" width="100" height="100">
         <path fill="#000000" d="M10 10 H 90 V 90 H 10 L 10 10"></path>
      </svg>
   </div>
</body>
</html>

Beispiel 2

Das folgende Beispiel zeigt den Prozess der dynamischen Änderung der Farbe einer SVG-Grafik mithilfe von JavaScript und CSS.

<!DOCTYPE html>
<html>
<head>
   <title>How to change SVG color?</title>
   <style>
      svg {
         width: 100px;
         height: 100px;
      }
   </style>
</head>
<body>
   <h4>How to change SVG color?</h4>
   <div>
      <p>Before Color Change</p>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path fill="none" d="M0 0h24v24H0z" />
         <path
         d="M6.1 3.3L4.7 4.7l6.2 6.2L2 17.6l1.4 1.4 4.6-4.6 6.2 6.2 1.4-1.4-6.2-6.2 6.2-6.2-1.4-1.4-4.6 4.6-2.5-2.5zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
      </svg>
   </div>
   <br>
   <div>
      <p>After Color Change</p>
      <svg id="my-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
         <path fill="none" d="M0 0h24v24H0z" />
         <path
         d="M6.1 3.3L4.7 4.7l6.2 6.2L2 17.6l1.4 1.4 4.6-4.6 6.2 6.2 1.4-1.4-6.2-6.2 6.2-6.2-1.4-1.4-4.6 4.6-2.5-2.5zM12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
      </svg>
   </div>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
      $(document).ready(function () {
         $('#my-svg path').css('fill', 'red');
      });
   </script>
</body>
</html>

Fazit

Zusammenfassend lässt sich sagen, dass das Ändern des Farbtons eines SVG-Bildes eine einfache, aber effektive Möglichkeit ist, Ihre Grafiken an Ihre spezifischen Bedürfnisse anzupassen. Mithilfe von CSS können Sie den Farbton bestimmter Elemente in SVG oder des gesamten Bilds problemlos ändern. Wenn Sie die in diesem Artikel vorgestellten Richtlinien befolgen, sollten Sie nun ein umfassendes Verständnis dafür haben, wie Sie die Farbtöne von SVG-Bildern ändern, und können dieses Wissen anwenden, um ästhetisch ansprechendere Designs für Ihre Webseiten oder Projekte zu erstellen. Bedenken Sie, dass SVG-Bilder gegenüber anderen Bildformaten mehrere Vorteile haben, darunter Anpassbarkeit und Flexibilität. Daher kann die Integration dieser Bilder in Ihre Designs Ihre Webentwicklungsfähigkeiten erheblich verbessern. Wir hoffen, dass Sie dieser Artikel inspiriert hat und dass Sie nun die Möglichkeit haben, mit Ihren eigenen SVG-Farbpaletten zu experimentieren.

Das obige ist der detaillierte Inhalt vonWie ändere ich SVG-Farben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!