不一样的CSS(4)--icon图标系列之svg

序言

上一节内容我们讲解了如何利用css去画一个五角星，其中包括了使用svg的方法，有些小伙伴们对svg的使用不是很了解，那么本节内容我们主要来讲一下，关于svg标签的的使用。

目录

  • 序言
  • 一、svg的介绍
  • 二、安装SVG扩展插件
  • 三、SVG基础知识
  • 四、SVG在HTML中的导入方式
    • 1.img导入
    • 2.使用 object 标签
    • 3.iframe标签导入
    • 4.将svg直接写在html当中
  • 五、rect矩型
    • 1.rect的属性
    • 2.rect的使用
  • 六、circle圆
    • 1.circle的属性
    • 2.circle的使用
  • 七、ellipse椭圆
    • 1.ellipse的属性
    • 2.ellipse的使用
  • 八、line直线
    • 1.line的属性
    • 2.line的使用
  • 九、polygon多边形
    • 1.polygon的属性
    • 2.polygon的使用
  • 十、polyline多段线
    • 1.polyline属性
    • 2.polyline的使用
  • 十一、path路径
    • 1.path属性
    • 2.path的使用
  • 十二、自动生成svg
    • 1.进入界面点击创建文件
    • 2.创建画板
    • 3.了解用法
    • 4.导出svg
  • 十二、结语

一、svg的介绍

在菜鸟教程上是这样介绍他的：

  • SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
  • SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。
  • SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。
  • SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。
    简单来说就是我们可以通过svg来制作图标，网页的设计，以及数据的可视化，并且图片放大缩小不会失真。那么什么是矢量图，什么是位图呢？他们的区别是什么？接下来我们来看下面两幅图：
    左边就是我们的矢量图，也就是说我们使用svg画出来的放大以后并不会失真放大以后看不到像素格子，而位图（又叫点阵图）放大以后会失真，你会看到像第二幅图一样的像素格子，这个就是位图。
    在这里插入图片描述

在了解了svg以后我们就开始学习svg吧，本节内容我们使用VS Code编译软件来进行学习，那么开始今天的学习吧~

二、安装SVG扩展插件

这里我已经安装过了所以显示卸载，大家可以双击打开以后会显示安装，点击安装就可以了。
在这里插入图片描述
那么我们来看一下这个插件的作用是什么，为什么要安装：
安装完成以后，我们在编译的同时就可以看到svg图的变化，实时监控，方便于我们的观察，下面是一段svg图的代码，大家可以新建一个svg文件，将代码复制下来尝试一下，后续我们会讲解具体的内容。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="red" />
</svg>

在这里插入图片描述
打开以后我们就可以得到svg的预览图，如下图所示：
在这里插入图片描述

三、SVG基础知识

  • 在svg标签内部是svg的内容，可以由多个svg的内容组成
  • xmlns 属性指定 SVG 文档的 XML 命名空间。
  • width指定了画布的宽
  • height指定了画布的高
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="red" />
</svg>

其中这里的代码里面包含了一个svg图形，circle 代表了圆形，除此之外SVG 还有一些其他的图型以便于我i们绘制不同的形状。

  • rect：绘制矩形
  • circle：绘制圆形
  • ellipse：绘制椭圆
  • line：绘制直线
  • polyline：绘制折线
  • polygon：绘制多边形
  • path：绘制路径

四、SVG在HTML中的导入方式

1.img导入

作为img导入，可以设置他的宽高

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="green" />
</svg>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../1.svg" alt="" width="200px" height="200px">
</body></html>

运行结果
在这里插入图片描述

2.使用 object 标签

svg代码与上面一致，这里就不再重复写了。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../1.svg" alt="" width="200px" height="200px"><object data="./1.svg" type="">我是svg图片</object>
</body></html>

注意在object当中，我们写了一段文字 “我是svg图片” ，这里这文字并没有展示出来，原因是他是object标签的一个备用文字，类似于我们的img标签的alt属性，因为有些浏览器不支持object标签的使用的，当不支持object的标签的时候就会展示这段文字，当然现在大多数浏览器都是兼容的，或者当svg图像丢失也会显示这段文字。
在这里插入图片描述
浏览器兼容情况：
我们可以看到只有IE浏览器以及Opera Mini，是不兼容的，IE浏览器基本没有使用的了，Opera Mini在国内市场占比份额很小，基本没有，所以一般并不用担心兼容的问题。
在这里插入图片描述

测试（这里我们将svg文件改为2.svg实际我们并没有新建2.svg图像，那么会显示什么呢？）：

 <object data="./2.svg" type="">我是svg图片</object>

运行结果：
在这里插入图片描述

3.iframe标签导入

可以指定他的宽和高

 <iframe src="1.svg" width="200" height="200"></iframe>

运行结果展示:
在这里插入图片描述

4.将svg直接写在html当中

方便对svg进行调整

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><img src="../1.svg" alt="" width="200px" height="200px"><object data="./1.svg" type="">我是svg图片</object><iframe src="1.svg" width="200" height="200"></iframe><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="80" fill="green" /></svg>
</body></html>

运行结果：
在这里插入图片描述

五、rect矩型

1.rect的属性

  • x=“x-coordinate” 矩形左上角的 x 坐标
  • y=“y-coordinate” 矩形左上角的 y 坐标
  • width=“width-value” 矩形的宽度
  • height=“height-value” 矩形的高度
  • rx=“rx-value” 矩形的圆角半径（水平方向）
  • ry=“ry-value” 矩形的圆角半径（垂直方向）
  • fill=“fill-color” 矩形的填充颜色
  • stroke=“stroke-color” 矩形的描边颜色
  • stroke-width=“width-value” 矩形的描边宽度

2.rect的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" x="30px" y="30px" rx="10px" ry="30px" fill="red" stroke="blue" stroke-width="5px" />
</svg>

在这里插入图片描述

六、circle圆

1.circle的属性

  • cx=“x-coordinate” 圆心的 x 坐标
  • cy=“y-coordinate” 圆心的 y 坐标
  • r=“radius” 圆的半径
  • fill=“fill-color” 圆的填充颜色
  • stroke=“stroke-color” 圆的描边颜色
  • stroke-width=“width” 圆的描边宽度

2.circle的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="50px" cy="100px" r="30px" fill="red" stroke="blue" stroke-width="5px" />
</svg>

在这里插入图片描述

七、ellipse椭圆

椭圆与圆内容几乎一样，只是将圆形的r更改为rx与ry，其他属性都一致，这里就来简单讲解一下这两个属性：

1.ellipse的属性

  • cx=“x-coordinate” 椭圆心的 x 坐标
  • cy=“y-coordinate” 椭圆心的 y 坐标
  • rx=“x-radiu” 椭圆水平轴的半径
  • ry=“x-radiu” 椭圆垂直轴的半径
  • fill=“fill-color” 椭圆的填充颜色
  • stroke=“stroke-color” 椭圆的描边颜色
  • stroke-width=“width” 椭圆的描边宽度

2.ellipse的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><ellipse cx="50px" cy="100px" rx="30px" ry="10px" fill="red" stroke="blue" stroke-width="5px" />
</svg>

在这里插入图片描述

八、line直线

1.line的属性

  • x1=“x1-coordinate” 起点的 x 坐标
  • y1=“y1-coordinate” 起点的 y 坐标
  • x2=“x2-coordinate” 终点的 x 坐标
  • y2=“y2-coordinate” 终点的 y 坐标
  • stroke=“stroke-color” 直线的颜色
  • stroke-width=“width” 直线的宽度

2.line的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><line x1="100" x2="100" y1="0" y2="100" stroke="red" stroke-width="10" />
</svg>

在这里插入图片描述

九、polygon多边形

1.polygon的属性

  • points=“x1,y1 x2,y2 x3,y3 …” 多边形各个顶点的坐标
  • fill=“fill-color” 多边形的填充颜色
  • stroke=“stroke-color” 多边形的边框颜色
  • stroke-width=“width” 多边形的边框宽度

2.polygon的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><polygon points="30,30 70,30 50,100" fill="red" stroke="black" stroke-width="2" />
</svg>

在这里插入图片描述

十、polyline多段线

1.polyline属性

  • points=“x1,y1 x2,y2 x3,y3 …” 多段线各个顶点的坐标
  • fill=“none” 多段线的填充颜色，使用 “none” 表示不填充
  • stroke=“stroke-color” 多段线的边框颜色
  • stroke-width=“width” 多段线的边框宽度

2.polyline的使用

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><polyline points="30,30 70,30 50,100" fill="red" stroke="black" stroke-width="2" />
</svg>

注意看下面，polyline与polygon的区别，多段线并不会自动闭合
在这里插入图片描述

十一、path路径

1.path属性

  • d=“path-data” 定义路径的路径数据
  • fill=“fill-color” 路径的填充颜色
  • stroke=“stroke-color” 路径的描边颜色
  • stroke-width=“width” 路径的描边宽度
  • d 属性定义了路径的路径数据，即路径命令序列。路径数据由一系列的路径命令组成，每个路径命令以字母开头，后面跟随一组数字参数。常用的路径命令包括：M（移动到）、L（直线到）、H（水平线到）、V（垂直线到）、C（三次贝塞尔曲线）、S（光滑曲线）、Q（二次贝塞尔曲线）、T（光滑二次贝塞尔曲线）、A（圆弧）、Z（闭合路径）等。

2.path的使用

示例一：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M150 0 L75 200 L225 200 Z" />
</svg>

在这里插入图片描述
示例二：

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg"><path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
</svg>

首先是起始点移动到距离画布水平方向100px,垂直方向350px,那么起始点也就是绿色线条交汇处为起始点，使用q二次贝塞尔曲线，贝塞尔曲线的控制点是根据起始点的位置计算的，所以第一个点就是距离起始点水平方向150px，垂直方向-300px,也就是红色点的位置，第二个控制点是距离起始点300px的位置最后形成如下曲线：
在这里插入图片描述

十二、自动生成svg

这样我们就完成了path路径，可以用来制作一些不规则的曲线，那么如果曲线多了该怎么办，需要一个一个的去找控制点吗？
当然是不想需要的，如果你想自己去制作一个svg图，那么你可以借助第三方自动生成svg,接下来要介绍的是即使设计这个网站，这个网站是一个免费制作svg图片的网站，可以自动生成。
网站链接：（戳我进如即时设计)打开以后大家自行登录一下。

1.进入界面点击创建文件

在这里插入图片描述

2.创建画板

3.了解用法

形状的创建
在这里插入图片描述

使用钢笔工具绘制路径
在这里插入图片描述
其他的这里就不多做介绍了，大家可以自己看一下
在这里插入图片描述

4.导出svg

在这里插入图片描述
导出以后将其放在你的VS Code中，使用VS Code打开就可以查看svg代码了

在这里插入图片描述
在这里插入图片描述

十二、结语

那么本节内容就到此结束了，除了以上说的这些svg标签以外还有一些文字，模糊等效果，大家可以参考菜鸟教程去查看学习一下，如果你想继续学习有关前端的知识，可以加入博主的社区（戳我进入社区），社区会不定时更新一些新的知识，希望对小伙伴们有所帮助，本节内容就到此结束了，我们下一节再见~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/34345.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

读取文件进度条

读取文件进度条

一、widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMenuBar> #include <QFileDialog> #include <QFile> #include <QDebug> #include <QTimer> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NA…
阅读更多...
js this

js this

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>this</title> </head> <body> <script>let fengfeng "枫枫"console.log(this)// alert("123")funct…
阅读更多...
wordpress网站安装了Linux宝塔面板，限制IP地址访问网站，只能使用域名访问网站

wordpress网站安装了Linux宝塔面板，限制IP地址访问网站，只能使用域名访问网站

一、Linux服务器安装Linux宝塔面板 这个步骤参考网上其他教程。 二、Linux宝塔面板部署wordpress网站 这个步骤参考网上其他教程&#xff0c;保证网站能够正常访问&#xff0c;并且使用Linux宝塔面板申请并部署了SSL证书&#xff0c;使用https协议默认443端口正常访问。 三…
阅读更多...
软考高级架构-9.4.4-双机热备技术 与 服务器集群技术

软考高级架构-9.4.4-双机热备技术 与 服务器集群技术

一、双机热备 1、特点&#xff1a; 软硬件结合&#xff1a;系统由两台服务器&#xff08;主机和备机&#xff09;、一个共享存储&#xff08;通常为磁盘阵列柜&#xff09;、以及双机热备软件&#xff08;提供心跳检测、故障转移和资源管理功能的核心软件&#xff09;组成。 …
阅读更多...
电子商务人工智能指南 1/6 - 搜索、广告和发现

电子商务人工智能指南 1/6 - 搜索、广告和发现

介绍 81% 的零售业高管表示&#xff0c; AI 至少在其组织中发挥了中等至完全的作用。然而&#xff0c;78% 的受访零售业高管表示&#xff0c;很难跟上不断发展的 AI 格局。 近年来&#xff0c;电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…
阅读更多...
论文 | EfficientRAG: Efficient Retriever for Multi-Hop Question Answering

论文 | EfficientRAG: Efficient Retriever for Multi-Hop Question Answering

1. 论文介绍与研究动机 本文提出了一个新的检索增强生成&#xff08;RAG&#xff09;方法——EfficientRAG&#xff0c;它专门用于解决复杂的多跳问题。在多跳问答中&#xff0c;问题的答案需要从多个信息源中检索并结合起来&#xff0c;远比单跳问题复杂&#xff0c;因此也更加…
阅读更多...
超详细搭建PhpStorm+PhpStudy开发环境

超详细搭建PhpStorm+PhpStudy开发环境

刚开始接触PHP开发&#xff0c;搭建开发环境是第一步&#xff0c;网上下载PhpStorm和PhpStudy软件&#xff0c;怎样安装和激活就不详细说了&#xff0c;我们重点来看一看怎样搭配这两个开发环境。 前提&#xff1a;现在假设你已经安装完PhpStorm和PhpStudy软件。 我的PhpStor…
阅读更多...
Linux U-Boot 启动流程详解

Linux U-Boot 启动流程详解

目录 一、引言 二、U-Boot 启动前的准备 三、U-Boot 的启动流程 1.第一阶段&#xff1a;SPL&#xff08;Secondary Program Loader&#xff09;启动 2.第二阶段&#xff1a;U-Boot 主程序初始化 3.第三阶段&#xff1a;内核加载 4.第四阶段&#xff1a;参数传递 5.第五阶…
阅读更多...
[Redis#16] 事务 | vs Mysql | 命令 | WATCH的实现

[Redis#16] 事务 | vs Mysql | 命令 | WATCH的实现

目录 什么是事务 实现事务的方式 Redis 事务与 MySQL 事务的对比 应用场景&#xff1a;防止超卖 Lua 脚本增强 事务操作 MULTI & EXEC DISCARD WATCH WATCH 的实现原理 什么是事务 [MySQL#12] 事务(1) | ACID | commit | 回滚 | 常见操作 Redis 的事务和 MySQL…
阅读更多...
day03-分析产品原型-课程

day03-分析产品原型-课程

1. 开发流程 2. 分析产品原型 2.1 业务流程 产品原型图&#xff1a; 两个业务模块之间使用异步通信 2.2 查询课程列表-接口 https://apifox.com/apidoc/shared-3076deb7-ecde-4519-8e57-390d336aef4c 2.2.1 课表VO 前端课表的相关参数&#xff1a; 现在还不能一步到位&a…
阅读更多...
电子商务人工智能指南 2/6 - 需求预测和库存管理

电子商务人工智能指南 2/6 - 需求预测和库存管理

介绍 81% 的零售业高管表示&#xff0c; AI 至少在其组织中发挥了中等至完全的作用。然而&#xff0c;78% 的受访零售业高管表示&#xff0c;很难跟上不断发展的 AI 格局。 近年来&#xff0c;电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…
阅读更多...
CANoe IG实现信号遍历

CANoe IG实现信号遍历

CANoe IG也可以实现信号遍历的功能&#xff0c;设置如下&#xff1a; 注意事项&#xff1a; 选择 Range of values&#xff0c;是实现信号设定值范围内&#xff08;6&#xff09;的遍历 Hold time 要设置成和周期一致&#xff0c;如果不一致&#xff0c;则信号变化和周期不一…
阅读更多...
AI大模型驱动数据分析：利用自然语言实现数据查询与可视化（1）

AI大模型驱动数据分析：利用自然语言实现数据查询与可视化（1）

在当今AI驱动的时代&#xff0c;数据分析已成为各行各业不可或缺的能力。然而&#xff0c;传统的数据分析流程通常需要掌握SQL、数据处理和可视化等多项专业技能&#xff0c;这对非技术背景的业务人员来说是一个不小的挑战。 想象一下&#xff0c;当数据中心的负责人打开手机时…
阅读更多...
蓝桥杯训练15——穿越雷区

蓝桥杯训练15——穿越雷区

from collections import deque def bfs(leiqu): n len(leiqu) # 定义四个方向&#xff1a;右、下、左、上 directions[(0,1),(0,-1),(1,0),(-1,0)] # 初始化访问标记矩阵 visited [[False] * n for _ in range(n)] queue deque() #…
阅读更多...
【STL】用一张哈希表封装unordered_set和unordered_map

【STL】用一张哈希表封装unordered_set和unordered_map

哈希表源代码 这里是使用开散列实现的哈希表&#xff0c;为了和库里的哈希表进行区分&#xff0c;我将哈希表放入到了命名空间中 //确保取余运算符两边是正整数&#xff0c;下标不能是负整数 template<class K> struct DefaultHashFunc {size_t operator()(const K&…
阅读更多...
搜索二维矩阵 II

搜索二维矩阵 II

搜索二维矩阵 II 编写一个高效的算法来搜索 *m* x *n* 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9…
阅读更多...
嵌入式入门Day24

嵌入式入门Day24

数据结构Day5 树形结构相关概念二叉树相关概念二叉树的状态二叉树性质二叉树的存储二叉树根据已有序列推出树的结构练习 算法相关概念算法特性算法的设计要求时间复杂度排序算法冒泡排序&#xff08;改良版&#xff09;选择排序&#xff08;O(n^2)&#xff09;直接插入排序&…
阅读更多...
百度网盘qzxing-master.zip

百度网盘qzxing-master.zip

qzxing 这是一个针对 ZXing 条形码图像处理库的 Qt/QML 封装库。 支持以下类型的条形码解码&#xff1a; UPC-AUPC-EEAN-8EAN-13ITFCode 39Code 93Code 128&#xff08;GS1&#xff09;Codabar二维码数据矩阵Aztec&#xff08;测试版&#xff09;PDF 417 支持以下类型的条形…
阅读更多...
Ping32与天锐绿盾加密软件对比：哪款防泄密软件适合您的企业？

Ping32与天锐绿盾加密软件对比：哪款防泄密软件适合您的企业？

企业数据泄漏事故层出不穷&#xff0c;为了有效防止机密信息的泄露&#xff0c;选择一款合适的防泄密软件显得尤为重要。Ping32和天锐绿盾加密软件都是市场上比较受欢迎的防泄密工具&#xff0c;那么它们各自的优势和差异是什么呢&#xff1f;让我们一起来了解。 1. 安全性&…
阅读更多...
PDF拆分之怎么对批量的PDF文件进行分割-免费PDF编辑工具分享

PDF拆分之怎么对批量的PDF文件进行分割-免费PDF编辑工具分享

>>更多PDF文件处理应用技巧请前往 96缔盟PDF处理器 主页 查阅&#xff01; ——————————————————————————————————————— 当然了&#xff0c;单个文件或者其他任意的文件个数的拆分也是支持的&#xff01; 序言 我之前的文章也有…
阅读更多...
最新文章

Copyright @ 2022~2023