| 使用 CSS 更改 HTML 中 SVG 元素的颜色 | 您所在的位置：网站首页 › 英语词语替换题目及答案 › 使用 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 语言，可用于创建如下所示的矢量图形。 它可用于通过绘制所有必要的线条和形状、编辑预先存在的光栅图像或同时执行这两项操作来制作图像。 图像及其元素可以通过过滤、合成或其他技术完全改变。
在向 W3C 提交了多种竞争格式但未获得完全批准后，SVG 于 1999 年创建。所有流行的浏览器都支持 SVG。 SVG 加载缓慢是一个缺点。 SVG 具有优势，包括 DOM 接口的可用性以及不需要第三方扩展。 使用 SVG 的优势 任何文本编辑器都可用于创建和编辑 SVG 图像。 SVG 图像可以编写脚本、压缩、索引和搜索。 SVG 中的图像可以缩放。 任何分辨率都可以生成高质量的 SVG 图像打印件。 SVG 图像可以放大。 如果放大或缩小 SVG 图形，它们将保持所有质量。 SVG 文件是纯 XML，是一种开放标准。 SVG 的方法SVG 用作容纳不同图形的容器。 因此，它提供了多种方法或标签来在 HTML 文档上自行创建图片。 本文将讨论一些元素及其可用的不同选项。 使用 SVG 绘制圆使用 标签在 SVG 中绘制一个简单的圆。 它具有不同的属性，用于设置圆的属性。 作为我们的第一个示例，我们将从在 HTML 中使用 SVG 绘制一个圆开始。 以下 HTML 代码在 SVG 中绘制一个圆。 First SVG Demo Sorry, SVG is not supported for your browser.代码呈现如下。 元素引入了 SVG 图像。 元素的宽度和高度属性指定 SVG 图像的尺寸。 可以使用 元素绘制圆。 圆心的 x 和 y 坐标由 cx 和 cy 属性指定。 如果未设置 cx 和 cy，则圆心设置为 (0,0)。 r 属性指定圆的半径。 形状轮廓的外观由其 stroke 和 stroke-width 属性控制。 我们让圆的轮廓有一个 5 px 的红色“边框”。 fill 属性指的是圆的内部颜色。 最后，关闭 标签将关闭 SVG 图像。如果浏览器不支持 SVG，将显示消息“抱歉，您的浏览器不支持 SVG”。 使用 SVG 绘制矩形SVG 中的 元素用于绘制矩形。 类似于 元素，它有多个属性可以用来设置矩形的属性。 以下代码段使用 SVG 绘制一个矩形。 SVG Rectangle Sorry, SVG is not supported for your browser. 矩形的宽度和高度由元素 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 文件。 使用 CSS 更改 SVG 图像的颜色如果您需要更改 SVG 图像的颜色，我们可以使用 CSS 滤镜属性对照片应用不同的滤镜并更改其色调和颜色。 filter CSS 属性赋予元素视觉效果，如模糊或颜色偏移。 使用过滤器来更改边框、背景和图像的呈现方式是一种常见的做法。 例如，如果我们需要改变前面例子中图像的颜色，那么我们可以使用下面的过滤器属性。 .filter-green{ filter: invert(58%) sepia(69%) saturate(1276%) hue-rotate(76deg) brightness(110%) contrast(109%); }这将在图像上创建叠加效果并更改其颜色。 在上面的 CSS 代码中，我们对图像应用了以下滤镜。 invert ：反转图像的颜色。 从 0% 到 100%，其中 100% 将使图像完全反转。 sepia ：这会为图像添加复古效果，最终将其颜色更改为金属色。 saturate ：设置图像中的颜色强度。 较高的值意味着图像的颜色更强烈、更锐利。 hue-rotate ：这个是改变图像围绕图像色环的色调旋转。 brightness ：设置图像的亮度。 值为 0 表示全黑，100% 表示图像的原始亮度。 大于 100 的值会使它更亮。 contrast ：设置图像的对比度。 值为 0 表示全黑，100% 表示图像的原始对比度，大于 100 的值会使对比度更高。上一篇：使用 CSS 隐藏项目符号点 下一篇：使用 CSS 将元素置于最前面 转载请发邮件至 [email protected] 进行申请，经作者同意之后，转载请以链接形式注明出处 本文地址： 相关文章 覆盖 Bootstrap CSS发布时间：2023/04/28 浏览次数：58 分类：CSS 本文介绍的是著名的 CSS UI 框架 Bootstrap。 我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。 使用 CSS 制作带圆角的 HTML 表格发布时间：2023/04/28 浏览次数：104 分类：CSS 这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格 使图像、表格或 div 段的角变圆的属性是 border-radius。 CSS 设置轮廓 outline 的半径发布时间：2023/04/28 浏览次数：121 分类：CSS 在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。 在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。 使用 CSS 居中视频发布时间：2023/04/28 浏览次数：69 分类：CSS 在本文中，用户将学习仅使用 CSS 将 元素居中。 我们已经在下面解释了使用 CSS 使视频居中的多种方法。 使用 CSS 居中内联块发布时间：2023/04/28 浏览次数：108 分类：CSS 在本文中，我们将创建多个 HTML 元素并将其显示设置为 inline-block。 之后，我们将学习使用 display: inline-block 将所有元素居中。 使用 CSS 添加透明边框发布时间：2023/04/28 浏览次数：91 分类：CSS 在本文中，我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。 透明边框是图像或对象周围的边框，可改善用户体验。 使用 CSS 向上移动文本发布时间：2023/04/28 浏览次数：146 分类：CSS 有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何使用 css 从网页底部向上移动文本。 使用 CSS 和 JavaScript 制作文本闪烁发布时间：2023/04/28 浏览次数：145 分类：CSS 本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。 CSS 防止文本选择发布时间：2023/04/28 浏览次数：75 分类：CSS 在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。 此外，您还将了解如何为不同的 Web 浏览器使用该属性。 |
| CopyRight 2018-2019 实验室设备网 版权所有 |