如何更改 SVG 顏色？-css教學-PHP中文網

首頁

web前端

css教學

如何更改 SVG 顏色？

PHPz

Sep 01, 2023 pm 09:09 PM

如何更改 SVG 颜色？

可縮放向量圖形（SVG）已經廣泛流行，作為一種能夠產生高品質向量圖形並且可以在任何尺寸下無損失地調整的格式。使用SVG的一個附加好處是它能夠根據特定的偏好來改變圖形的顏色。如果您想要協調您的網站的色調或微調特定目標的色彩調色板，使用CSS可以輕鬆修改SVG的顏色。本文將引導您逐步修改SVG的顏色，從確定特定元素開始，到調整顏色本身。無論您是網頁設計師、開發者還是渴望個性化他們的SVG圖形的好奇學習者，本文承諾為您提供所有必要的知識，以便開始您的旅程。

使用CSS來定位SVG元素

CSS 代表級聯樣式表，是一種用於設計 HTML 樣式的有影響力的工具，也可用於變更 SVG 圖形的樣式。若要修改 SVG 的顏色，您可以利用 CSS 選擇器來定位需要修改的確切元素。例如，如果您希望變更 SVG 中所有路徑的填滿顏色，您可以採用以下 CSS 規則 -

svg path {
   fill: red;
}

這會將 SVG 中所有路徑的填滿色彩變更為紅色。您也可以使用 CSS 透過 ID 或類別來定位 SVG 中的特定元素。

修改 SVG 顏色

將 SVG 元素的色度修改為任何官方授權的 CSS 色調是可行的，無論它是色調、十六進制系統、RGB、RGBA、HSL、HSLA 還是其他允許的色彩標準的習慣標籤。例如，您可以將路徑內的顏色修改為傳統色調（例如“verdant”）或十六進位代碼（例如“#ff0000”）。您也可以透過 RGB 或 HSL 值指定準確的色調，例如「rgb(255, 0, 0)」或「hsl(0, 100%, 50%)」。除了調整 SVG 元素的填滿色調之外，還可以使用描邊屬性而不是填滿屬性來修改描邊色調。

覆蓋 SVG 顏色

請注意，某些SVG檔案可能包含內聯樣式或硬編碼顏色，這些可能會覆寫您定義的CSS規則。在這種情況下，可能需要修改SVG檔案以消除這些樣式或顏色。您可以透過使用文字編輯器開啟SVG文件，並尋找要修改的顏色值來實現這一點。一旦找到相關的樣式或顏色，您可以根據自己的喜好刪除或調整它們。但是，您必須小心，避免刪除可能影響SVG功能的任何重要程式碼或標籤。

方法

以下是您可以遵循的指南，以更改 SVG 的色調 -

識別您希望改變顏色的特定SVG元素是至關重要的。這可以透過在您的網頁瀏覽器中使用開發者工具來檢查SVG元素來實現。

制定一個CSS聲明，旨在修改特定的SVG元素或多個元素的色調。您可以使用元素選擇器，例如“svg”，“path”或“rect”來專注於特定的元素，或者使用類別選擇器或ID選擇器來更細緻地針對特定元素。

在 CSS 聲明中，為 fill 屬性指派您偏好的顏色，以變更 SVG 的填滿顏色。您可以使用顏色名稱、十六進位代碼或 RGB 值來表示顏色。

您也可以選擇指定描邊屬性來變更 SVG 描邊的顏色，或使用其他 CSS 屬性來塑造 SVG。

如果您正在使用外部CSS文件，請在HTML文件的頭部部分使用link元素連結到它。

儲存您的變更並重新整理網頁，以查看更新後的SVG顏色。

範例 1

下面的範例將展示如何使用CSS更改SVG圖形的顏色

<!DOCTYPE html>
<html>
<head>
   <title>How to change SVG color?</title>
   <style>
      #my-svg path {
         fill: green;
      }
   </style>
</head>
<body>
   <h4 id="How-to-change-SVG-color">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>

範例 2

以下範例示範了使用JavaScript和CSS動態變更SVG圖形顏色的過程。

<!DOCTYPE html>
<html>
<head>
   <title>How to change SVG color?</title>
   <style>
      svg {
         width: 100px;
         height: 100px;
      }
   </style>
</head>
<body>
   <h4 id="How-to-change-SVG-color">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>

結論

總結起來，改變SVG影像的色調是一種簡單而有效的個人化圖形的方法，以滿足您特定的需求。透過使用CSS，您可以輕鬆修改SVG中特定元素或整個影像的色調。透過遵循本文中提出的指導方針，您現在應該對如何修改SVG影像的色調有了全面的理解，並可以將這些知識應用於為您的網頁或專案創建更具美感的設計。請記住，與其他圖片格式相比，SVG影像具有可調整性和靈活性等多個優勢，因此將它們整合到您的設計中可以顯著提升您的網頁開發能力。我們期待本文對您有所啟發，並希望您現在能夠嘗試使用自己的SVG調色板進行實驗。

以上是如何更改 SVG 顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除