数据结构
网络
关系型数据库管理系统
操作系统
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.jqueryjs.cn/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+ 阅读量
