极客笔记CSS 如何更改SVG颜色
可缩放矢量图形（SVG）已经广泛流行起来，作为一种用于生成高质量矢量图形的格式，可以在任何尺寸下调整大小而不损失分辨率。使用SVG的另一个好处是可以通过CSS来改变图形的颜色以适应特定的偏好。如果您希望协调您网站的色调或精确调整特定目标的色彩调色板，通过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元素的填充颜色，也可以通过使用描边属性而不是填充属性来修改描边颜色。
覆盖SVG颜色
请注意，某些SVG文件可能包含内联样式或硬编码的颜色，这些颜色可能会覆盖您定义的CSS规则。在这种情况下，可能需要修改SVG文件以删除这些样式或颜色。您可以通过使用文本编辑器打开SVG文件并查找要修改的颜色值来完成此操作。找到相关的样式或颜色后，您可以删除它们或根据需要进行调整。但是，务必小心避免删除可能影响SVG功能的任何重要代码或标签。
方法
以下是您可以遵循的准则来修改SVG的颜色：
识别您希望修改颜色的特定SVG元素至关重要。您可以通过使用Web浏览器中的开发工具检查SVG元素来完成此操作。
制定一个CSS声明，该声明旨在针对特定的SVG元素或您想要修改颜色的多个元素。您可以使用元素选择器（如“svg”，“path”或“rect”）来专注于某些元素，或者使用类选择器或ID选择器来指定更精确的元素。
在CSS声明中，将fill属性赋予您所喜欢的颜色以修改SVG的填充颜色。您可以使用颜色名称、十六进制码或RGB值来表示颜色。
选择性地，您可以指定描边属性来修改SVG的描边颜色，或者使用其他CSS属性来定制SVG。
如果您正在使用外部CSS文件，请使用链接元素将其链接到HTML文档的头部部分。
保存更改并刷新网页以查看更新后的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图像相对于其他图片格式还具有其他优势，例如其可调整性和灵活性，因此将它们融入到您的设计中可以显著提升您的网页开发能力。我们希望本文对您有所启发，并希望您现在已经有能力尝试使用自己的SVG调色板进行实验。