如何更改 SVG 颜色？-css教程-PHP中文网

首页

web前端

css教程

如何更改 SVG 颜色？

PHPz

Sep 01, 2023 pm 09:09 PM

如何更改 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 还是其他允许的色彩标准的习惯标签。例如，您可以将路径内的颜色修改为传统色调（例如“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 id="How-to-change-SVG-color">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 id="How-to-change-SVG-color">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 颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除