如何使用 CSS 設定外部連結 SVG 的樣式？

如何使用外部CSS 設定SVG 樣式

在外部儲存SVG 圖形並透過連結存取它們時，透過外部樣式CSS 設定它們的樣式可能會造成挑戰。在這種情況下，CSS 檔案無法直接修改 SVG 的內容。

外部 CSS 限制

您的外部 CSS 檔案「main.css」只會影響SVG 的內容（如果它內聯包含在 HTML 中）。這表示以下程式碼片段：

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

不會受到「main.css」中 CSS 的影響。

在 SVG 中套用樣式

要設定外部儲存的 SVG 樣式，您需要在 SVG 檔案本身中定義 CSS。您可以使用樣式標籤：

<!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>

或者，您可以使用伺服器端工具（例如 Ruby 中的 Nokogiri）來根據活動樣式更新樣式標籤。

後備選項

如果上述解決方案都不可行，您可以求助於使用內聯SVG 或建立具有不同樣式的單獨 PNG。

以上是如何使用 CSS 設定外部連結 SVG 的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！