資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何更改 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 還是其他允許的色彩標準。例如，您可以將路徑內的顏色修改為常規顏色，例如“綠色”，或十六進位制程式碼，例如“#ff0000”。您還可以使用 RGB 或 HSL 值指定精確的顏色，例如“rgb(255, 0, 0)”或“hsl(0, 100%, 50%)”。除了調整 SVG 元素的填充顏色外，還可以透過使用 stroke 屬性而不是 fill 屬性來修改筆劃顏色。
覆蓋 SVG 顏色
請注意，某些 SVG 檔案可能包含內聯樣式或硬編碼顏色，這些顏色可能會覆蓋您定義的 CSS 規則。在這種情況下，可能需要更改 SVG 檔案以刪除這些樣式或顏色。您可以透過使用文字編輯器開啟 SVG 檔案並查詢要修改的顏色值來實現此目的。找到相關的樣式或顏色後，您可以根據自己的喜好將其刪除或調整。但是，必須小心謹慎，避免刪除可能影響 SVG 功能的任何重要程式碼或標籤。
方法
以下是在更改 SVG 顏色時可以遵循的指南：
確定要更改顏色的特定 SVG 元素非常重要。這可以透過使用 Web 瀏覽器中提供的開發者工具檢查 SVG 元素來完成。
制定一個靶向特定 SVG 元素或要更改顏色的多個元素的 CSS 宣告。您可以使用“svg”、“path”或“rect”等元素選擇器來聚焦於某些元素，或者使用類或 ID 選擇器來更精確地靶向特定元素。
在 CSS 宣告中，將 fill 屬性分配給您首選的顏色以更改 SVG 的填充顏色。您可以使用顏色名稱、十六進位制程式碼或 RGB 值來表示顏色。
可選地，您可以指定 stroke 屬性來更改 SVG 的筆劃顏色，或使用其他 CSS 屬性來設定 SVG 的樣式。
如果您使用的是外部 CSS 檔案，請使用 link 元素將其連結到 HTML 文件的 head 部分。
儲存更改並重新整理網頁以檢視更新的 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>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>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 影像具有其他幾個優勢，例如其可調整性和靈活性，因此將它們整合到您的設計中可以極大地提高您的 Web 開發能力。我們希望本文對您有所幫助，並且您現在已準備好嘗試您自己的 SVG 色板。
15K+ 閱讀量
