可缩放矢量图形（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>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调色板进行实验。
以上就是如何更改 SVG 颜色？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何更改 SVG 颜色？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
