中国建设监理协会网站继续教育系统,视频网站 备案,php医疗网站咨询源码,成都网站制作公司dedecms序言
上一节内容我们讲解了如何利用css去画一个五角星#xff0c;其中包括了使用svg的方法#xff0c;有些小伙伴们对svg的使用不是很了解#xff0c;那么本节内容我们主要来讲一下#xff0c;关于svg标签的的使用。 目录 序言一、svg的介绍二、安装SVG扩展插件三、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的使用 十二、自动生成svg1.进入界面点击创建文件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 width200 height200 xmlnshttp://www.w3.org/2000/svgcircle cx100 cy100 r80 fillred /
/svg打开以后我们就可以得到svg的预览图如下图所示
三、SVG基础知识
在svg标签内部是svg的内容可以由多个svg的内容组成xmlns 属性指定 SVG 文档的 XML 命名空间。width指定了画布的宽height指定了画布的高
svg width200 height200 xmlnshttp://www.w3.org/2000/svgcircle cx100 cy100 r80 fillred /
/svg其中这里的代码里面包含了一个svg图形circle 代表了圆形除此之外SVG 还有一些其他的图型以便于我i们绘制不同的形状。
rect绘制矩形circle绘制圆形ellipse绘制椭圆line绘制直线polyline绘制折线polygon绘制多边形path绘制路径
四、SVG在HTML中的导入方式
1.img导入
作为img导入可以设置他的宽高
svg width200 height200 xmlnshttp://www.w3.org/2000/svgcircle cx100 cy100 r80 fillgreen /
/svg!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg src../1.svg alt width200px height200px
/body/html运行结果
2.使用 object 标签
svg代码与上面一致这里就不再重复写了。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg src../1.svg alt width200px height200pxobject 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 src1.svg width200 height200/iframe运行结果展示:
4.将svg直接写在html当中
方便对svg进行调整
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyimg src../1.svg alt width200px height200pxobject data./1.svg type我是svg图片/objectiframe src1.svg width200 height200/iframesvg width200 height200 xmlnshttp://www.w3.org/2000/svgcircle cx100 cy100 r80 fillgreen //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 width200 height200 xmlnshttp://www.w3.org/2000/svgrect width100 height100 x30px y30px rx10px ry30px fillred strokeblue stroke-width5px /
/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 width200 height200 xmlnshttp://www.w3.org/2000/svgcircle cx50px cy100px r30px fillred strokeblue stroke-width5px /
/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 width200 height200 xmlnshttp://www.w3.org/2000/svgellipse cx50px cy100px rx30px ry10px fillred strokeblue stroke-width5px /
/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 width200 height200 xmlnshttp://www.w3.org/2000/svgline x1100 x2100 y10 y2100 strokered stroke-width10 /
/svg九、polygon多边形
1.polygon的属性 points“x1,y1 x2,y2 x3,y3 …” 多边形各个顶点的坐标fill“fill-color” 多边形的填充颜色stroke“stroke-color” 多边形的边框颜色stroke-width“width” 多边形的边框宽度 2.polygon的使用
svg width200 height200 xmlnshttp://www.w3.org/2000/svgpolygon points30,30 70,30 50,100 fillred strokeblack stroke-width2 /
/svg十、polyline多段线
1.polyline属性 points“x1,y1 x2,y2 x3,y3 …” 多段线各个顶点的坐标fill“none” 多段线的填充颜色使用 “none” 表示不填充stroke“stroke-color” 多段线的边框颜色stroke-width“width” 多段线的边框宽度 2.polyline的使用
svg width200 height200 xmlnshttp://www.w3.org/2000/svgpolyline points30,30 70,30 50,100 fillred strokeblack stroke-width2 /
/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 xmlnshttp://www.w3.org/2000/svg version1.1path dM150 0 L75 200 L225 200 Z /
/svg示例二
svg width400 height400 xmlnshttp://www.w3.org/2000/svgpath dM 100 350 q 150 -300 300 0 strokeblue stroke-width5 fillnone /
/svg首先是起始点移动到距离画布水平方向100px,垂直方向350px,那么起始点也就是绿色线条交汇处为起始点使用q二次贝塞尔曲线贝塞尔曲线的控制点是根据起始点的位置计算的所以第一个点就是距离起始点水平方向150px垂直方向-300px,也就是红色点的位置第二个控制点是距离起始点300px的位置最后形成如下曲线
十二、自动生成svg
这样我们就完成了path路径可以用来制作一些不规则的曲线那么如果曲线多了该怎么办需要一个一个的去找控制点吗 当然是不想需要的如果你想自己去制作一个svg图那么你可以借助第三方自动生成svg,接下来要介绍的是即使设计这个网站这个网站是一个免费制作svg图片的网站可以自动生成。 网站链接戳我进如即时设计)打开以后大家自行登录一下。
1.进入界面点击创建文件 2.创建画板 3.了解用法
形状的创建
使用钢笔工具绘制路径 其他的这里就不多做介绍了大家可以自己看一下
4.导出svg 导出以后将其放在你的VS Code中使用VS Code打开就可以查看svg代码了 十二、结语
那么本节内容就到此结束了除了以上说的这些svg标签以外还有一些文字模糊等效果大家可以参考菜鸟教程去查看学习一下如果你想继续学习有关前端的知识可以加入博主的社区戳我进入社区社区会不定时更新一些新的知识希望对小伙伴们有所帮助本节内容就到此结束了我们下一节再见~
