使用 CSS 更改 HTML 中 SVG 元素的颜色

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 更改 HTML 中 SVG 元素的颜色

作者：迹忆客最近更新：2023/04/27 浏览次数：

这个简单的指南是关于在 HTML 文档中使用 SVG 以及我们如何自定义它以使用 CSS 属性更改其颜色。首先，我们将简要介绍 HTML 中的 SVG。

SVG简介

与 XHTML 类似，SVG 是一种 XML 语言，可用于创建如下所示的矢量图形。它可用于通过绘制所有必要的线条和形状、编辑预先存在的光栅图像或同时执行这两项操作来制作图像。

图像及其元素可以通过过滤、合成或其他技术完全改变。

sample SVG image

在向 W3C 提交了多种竞争格式但未获得完全批准后，SVG 于 1999 年创建。所有流行的浏览器都支持 SVG。

SVG 加载缓慢是一个缺点。 SVG 具有优势，包括 DOM 接口的可用性以及不需要第三方扩展。

使用 SVG 的优势

任何文本编辑器都可用于创建和编辑 SVG 图像。
SVG 图像可以编写脚本、压缩、索引和搜索。
SVG 中的图像可以缩放。
任何分辨率都可以生成高质量的 SVG 图像打印件。
SVG 图像可以放大。
如果放大或缩小 SVG 图形，它们将保持所有质量。
SVG 文件是纯 XML，是一种开放标准。

SVG 的方法

SVG 用作容纳不同图形的容器。因此，它提供了多种方法或标签来在 HTML 文档上自行创建图片。本文将讨论一些元素及其可用的不同选项。

使用 SVG 绘制圆

使用 <circle> 标签在 SVG 中绘制一个简单的圆。它具有不同的属性，用于设置圆的属性。

作为我们的第一个示例，我们将从在 HTML 中使用 SVG 绘制一个圆开始。以下 HTML 代码在 SVG 中绘制一个圆。

<!DOCTYPE html>
<html>
<body>

<h1>First SVG Demo</h1>

<svg width="150" height="150">
   <circle cx="60" cy="60" r="50" stroke="red" stroke-width="5" fill="yellow" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>

代码呈现如下。

<svg> 元素引入了 SVG 图像。
<svg> 元素的宽度和高度属性指定 SVG 图像的尺寸。
可以使用 <circle> 元素绘制圆。
圆心的 x 和 y 坐标由 cx 和 cy 属性指定。
如果未设置 cx 和 cy，则圆心设置为 (0,0)。
r 属性指定圆的半径。
形状轮廓的外观由其 stroke 和 stroke-width 属性控制。我们让圆的轮廓有一个 5 px 的红色“边框”。
fill 属性指的是圆的内部颜色。
最后，关闭 </svg> 标签将关闭 SVG 图像。

如果浏览器不支持 SVG，将显示消息“抱歉，您的浏览器不支持 SVG”。

使用 SVG 绘制矩形

SVG 中的 <rect> 元素用于绘制矩形。类似于 <circle> 元素，它有多个属性可以用来设置矩形的属性。

以下代码段使用 SVG 绘制一个矩形。

<!DOCTYPE html>
<html>
<body>

<h1>SVG Rectangle</h1>

<svg width="200" height="200">
   <rect width="200" height="100" style="fill:red;stroke-width:5;stroke:black" />
   Sorry, SVG is not supported for your browser.
</svg>
</body>
</html>

矩形的宽度和高度由元素 rect 的 width 和 height 属性决定。
style 属性定义矩形的 CSS 属性。
CSS fill 属性决定了矩形的填充颜色。
CSS stroke-width 属性决定了矩形边框的宽度。
CSS stroke 属性指定矩形的边框颜色。

SVG 标签

SVG 文档中包含的图像由 <image> SVG 元素表示。它可以显示 SVG 文件或光栅图像文件。

JPEG、PNG 和其他 SVG 文件是 SVG 软件需要支持的唯一图像格式。动画 GIF 的行为是未定义的。

下面是 <image> 标签需要设置的一些属性。

x：定义图像相对于原点的水平位置。
y：定义图像相对于原点的垂直位置。
width：渲染图像的尺寸。与 HTML 中的 <img> 标签不同，此属性是必需的。
height：图像的渲染高度。与 HTML 中的 <img> 标签不同，此属性是必需的。
xlink 和 href：定义图像文件的 URL。
preserveAspectRatio：管理图像的缩放比例。

以下代码片段使用 SVG 中的图像标签显示 SVG 文件。

<!DOCTYPE html>
<html>
<body>

<svg width="96" height="96">
  <image xlink:href="/img/jiyik/logo.svg" width="96" height="96" />
</svg>
</body>
</html>

使用 CSS 更改 SVG 图像的颜色

如果您需要更改 SVG 图像的颜色，我们可以使用 CSS 滤镜属性对照片应用不同的滤镜并更改其色调和颜色。 filter CSS 属性赋予元素视觉效果，如模糊或颜色偏移。

使用过滤器来更改边框、背景和图像的呈现方式是一种常见的做法。

例如，如果我们需要改变前面例子中图像的颜色，那么我们可以使用下面的过滤器属性。

.filter-green{
        filter: invert(58%) sepia(69%) saturate(1276%) hue-rotate(76deg) brightness(110%) contrast(109%);
    }
<!DOCTYPE html>
<html>
<body>

<svg class="filter-green" width="96" height="96">
  <image xlink:href="/img/jiyik/logo.svg" width="96" height="96" />
</svg>
</body>
</html>