Wie formatiere ich extern verknüpfte SVGs mit CSS?

So stylen Sie SVG mit externem CSS

Wenn Sie SVG-Grafiken extern speichern und über Links darauf zugreifen, kann das Stylen über externes CSS ein Problem darstellen Herausforderung. In diesem Fall kann die CSS-Datei den SVG-Inhalt nicht direkt ändern.

Externe CSS-Einschränkungen

Ihre externe CSS-Datei „main.css“ wirkt sich nur auf die aus Inhalt einer SVG-Datei, wenn diese inline im HTML enthalten ist. Das bedeutet, dass das folgende Code-Snippet:

<a href="http://youtube.com/..." target="_blank">
  <img class="socIcon" src="images/socYouTube.svg" title="View my videos on YouTube" alt="YouTube" />
</a>

nicht vom CSS in „main.css“ betroffen ist.

Anwenden von Stilen innerhalb der SVG

Um eine extern gespeicherte SVG-Datei zu formatieren, müssen Sie das CSS in der SVG-Datei selbst definieren. Sie können ein Style-Tag verwenden:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="50px" height="50px" viewBox="0 0 50 50">
  <defs>
    <style type="text/css"><![CDATA[
      .socIcon g {
        fill: red;
      }
    ]]></style>
  </defs>
  <g>
    <path d="M28.44......."/>
  </g>
</svg>

Alternativ können Sie ein serverseitiges Tool wie Nokogiri in Ruby verwenden, um das Style-Tag basierend auf dem aktiven Stil zu aktualisieren.

Fallback-Optionen

Wenn keine der oben genannten Lösungen machbar ist, können Sie auf die Verwendung von Inline-SVGs zurückgreifen oder separate PNGs mit erstellen verschiedene Stile.

Das obige ist der detaillierte Inhalt vonWie formatiere ich extern verknüpfte SVGs mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!