使用 css 更改 html 中 svg 元素的颜色
这个简单的指南是关于在 html 文档中使用 svg 以及我们如何自定义它以使用 css 属性更改其颜色。 首先，我们将简要介绍 html 中的 svg。
svg简介
与 xhtml 类似，svg 是一种 xml 语言，可用于创建如下所示的矢量图形。 它可用于通过绘制所有必要的线条和形状、编辑预先存在的光栅图像或同时执行这两项操作来制作图像。
图像及其元素可以通过过滤、合成或其他技术完全改变。
在向 w3c 提交了多种竞争格式但未获得完全批准后，svg 于 1999 年创建。所有流行的浏览器都支持 svg。
svg 加载缓慢是一个缺点。 svg 具有优势，包括 dom 接口的可用性以及不需要第三方扩展。
使用 svg 的优势
- 任何文本编辑器都可用于创建和编辑 svg 图像。
- svg 图像可以编写脚本、压缩、索引和搜索。
- svg 中的图像可以缩放。
- 任何分辨率都可以生成高质量的 svg 图像打印件。
- svg 图像可以放大。
- 如果放大或缩小 svg 图形，它们将保持所有质量。
- svg 文件是纯 xml，是一种开放标准。
svg 的方法
svg 用作容纳不同图形的容器。 因此，它提供了多种方法或标签来在 html 文档上自行创建图片。 本文将讨论一些元素及其可用的不同选项。
使用 svg 绘制圆
使用
作为我们的第一个示例，我们将从在 html 中使用 svg 绘制一个圆开始。 以下 html 代码在 svg 中绘制一个圆。
html>
<html>
<body>
<h1>first svg demoh1>
<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 图像的尺寸。 -
可以使用
- 圆心的 x 和 y 坐标由 cx 和 cy 属性指定。
- 如果未设置 cx 和 cy，则圆心设置为 (0,0)。
- r 属性指定圆的半径。
- 形状轮廓的外观由其 stroke 和 stroke-width 属性控制。 我们让圆的轮廓有一个 5 px 的红色“边框”。
- fill 属性指的是圆的内部颜色。
-
最后，关闭
标签将关闭 svg 图像。
如果浏览器不支持 svg，将显示消息“抱歉，您的浏览器不支持 svg”。
使用 svg 绘制矩形
svg 中的
以下代码段使用 svg 绘制一个矩形。
html>
<html>
<body>
<h1>svg rectangleh1>
<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 文档中包含的图像由 svg 元素表示。 它可以显示 svg 文件或光栅图像文件。
jpeg、png 和其他 svg 文件是 svg 软件需要支持的唯一图像格式。 动画 gif 的行为是未定义的。
下面是 标签需要设置的一些属性。
- x：定义图像相对于原点的水平位置。
- y：定义图像相对于原点的垂直位置。
-
width：渲染图像的尺寸。 与 html 中的
标签不同，此属性是必需的。 -
height：图像的渲染高度。 与 html 中的
标签不同，此属性是必需的。 - xlink 和 href：定义图像文件的 url。
- preserveaspectratio：管理图像的缩放比例。
以下代码片段使用 svg 中的图像标签显示 svg 文件。
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%);
}
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>
这将在图像上创建叠加效果并更改其颜色。 在上面的 css 代码中，我们对图像应用了以下滤镜。
- invert ：反转图像的颜色。 从 0% 到 100%，其中 100% 将使图像完全反转。
- sepia ：这会为图像添加复古效果，最终将其颜色更改为金属色。
- saturate ：设置图像中的颜色强度。 较高的值意味着图像的颜色更强烈、更锐利。
- hue-rotate ：这个是改变图像围绕图像色环的色调旋转。
- brightness ：设置图像的亮度。 值为 0 表示全黑，100% 表示图像的原始亮度。 大于 100 的值会使它更亮。
- contrast ：设置图像的对比度。 值为 0 表示全黑，100% 表示图像的原始对比度，大于 100 的值会使对比度更高。
转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处
本文地址：
相关文章
发布时间：2023/04/28 浏览次数：133 分类：css
-
本文介绍的是著名的 css ui 框架 bootstrap。 我们将讨论使用自定义样式覆盖 bootstrap css 的过程。
使用 css 制作带圆角的 html 表格
发布时间：2023/04/28 浏览次数：245 分类：css
-
这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格 使图像、表格或 div 段的角变圆的属性是 border-radius。
css 设置轮廓 outline 的半径
发布时间：2023/04/28 浏览次数：140 分类：css
-
在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。 在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。
发布时间：2023/04/28 浏览次数：265 分类：css
-
在本文中，用户将学习仅使用 css 将
使用 css 居中内联块
发布时间：2023/04/28 浏览次数：118 分类：css
-
在本文中，我们将创建多个 html 元素并将其显示设置为 inline-block。 之后，我们将学习使用 display: inline-block 将所有元素居中。
使用 css 添加透明边框
发布时间：2023/04/28 浏览次数：525 分类：css
-
在本文中，我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。 透明边框是图像或对象周围的边框，可改善用户体验。
发布时间：2023/04/28 浏览次数：704 分类：css
-
有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何使用 css 从网页底部向上移动文本。
发布时间：2023/04/28 浏览次数：233 分类：css
-
本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。
css 防止文本选择
发布时间：2023/04/28 浏览次数：81 分类：css
-
在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。 此外，您还将了解如何为不同的 web 浏览器使用该属性。
