如何更改 SVG 颜色?

cssweb developmentfront end technology更新于 2024/3/17 12:28:17

可缩放矢量图形 (SVG) 作为一种用于生成高质量矢量图形的格式，已广受欢迎，这些矢量图形可在不损失分辨率的情况下进行任意大小调整。使用 SVG 的另一个好处是它能够根据特定偏好更改图形的颜色。如果您希望协调网站的色调或根据特定目标微调调色板，则可以使用 CSS 轻松修改 SVG 的颜色。本文将引导您完成更改 SVG 颜色的步骤，从确定特定元素开始，到调整颜色本身结束。无论您是网页设计师、开发人员，还是渴望个性化 SVG 图形的好奇学习者，本文都致力于为您提供踏上旅程所需的所有知识。

使用 CSS 定位 SVG 元素

CSS，即层叠样式表 (Cascading Style Sheets)，是一种用于设置 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 元素的填充色调外，您还可以使用 stroke 属性(而非 fill 属性)来修改描边色调。

覆盖 SVG 颜色

请注意，某些 SVG 文件可能包含内联样式或硬编码颜色，这些样式或颜色可能会取代您定义的 CSS 规则。在这种情况下，可能需要修改 SVG 文件以删除这些样式或颜色。您可以使用文本编辑器打开 SVG 文件并查找要修改的颜色值来实现此目的。找到相关的样式或颜色后，您可以根据自己的喜好删除或调整它们。但是，您必须谨慎操作，避免删除任何可能影响 SVG 功能的重要代码或标签。

方法

以下是您可以遵循的更改 SVG 色调的准则 -

确定要更改颜色的具体 SVG 元素至关重要。您可以通过 Web 浏览器中的开发者工具检查 SVG 元素来实现。

制定 CSS 声明，针对要修改色调的特定 SVG 元素或多个元素。您可以使用元素选择器(例如"svg"、"path"或"rect")来聚焦某些元素，或者使用 class 或 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 调色板了。