SVG简易入门(极简)
发布日期:2022-02-15 02:36:18 浏览次数:8 分类:技术文章

本文共 1605 字,大约阅读时间需要 5 分钟。

SVG简易入门

svg标签

<svg>标签相当于屏幕的窗口(也就是视口),所有的图形都绘制在这个视口上,可以在svg标签内通过widthheight为它设置大小,例:

这里的视口是宽高均为200px的正方形,宽高的长度也可以不使用px,而是使用相对大小:

这样它的宽高实际上屏幕大小单位,例如px

svg标签内含有一个属性viewBoxviewBox属性定义了视口上可以显示的区域:

上述代码表示viewBox从(0,0)点开始,100宽100高的区域。这个100100的区域,会放到200*200的画布上显示。于是就形成了放大两倍的效果。(也就是说第一个、第二个参数是起点的坐标,第三、第四个参数是终点的坐标,切记Y轴是从上往下的)。

图形

线段

<line>标签用于绘制线段:

<line>标签内有四个属性,x1y1用来表示线段起点的坐标,x2y2用来表示线段终点的坐标。

折线

<polyline>用来绘制折线:

<polyline>标签内含有points属性,用来表示折线的每个端点的坐标,端点横坐标与纵坐标用,隔开,而每个端点的坐标用空格隔开。

要注意的是<polyline>标签在绘制折线时,在默认情况下绘制的是一个闭合的图形,即第一个坐标会与最后一个坐标有条连线,被折线包裹的区域会被上色为默认颜色。

矩形

<rect>用来绘制矩形:

属性xy用来表示矩形左上角端点的坐标,widthheight用来控制宽度与长度。

多边形

<polygon>标签用来绘制多边形:

与“折线”相同,points属性用来确定多边形每个端点的坐标。

圆形

<circle>标签用来绘制圆形:

<circle>标签有三个基本属性,cxcy用来表示圆心的坐标,r用来表示圆的半径。

椭圆

<ellipse>标签用来绘制椭圆:

<ellipse>标签的cxcy表示椭圆的中心坐标,rxry分别横轴的半长与纵轴的半长。

图形的style设置

可以在css中设置图形的style

stroke: "black";stroke-width: 1;

stroke类似于普通css容器中的border属性,可以设置图形边框的颜色,如果是“线”或“折线”即表示线段的颜色。

stroke-width能设置图形边框或者线段的宽度。

fill:red;fill: transparent;

fill用来设置图形的填充色,如果设置成transparent则表示填充成透明色。

其他常用标签

<text>表示文本,生成的类似于我们使用Adobe illustrator创建文本后保存的矢量图,可以用改标签包裹文字:

Hello World

<text>xy表示文字区块的基线的起点文字的,文字样式可以在css中设置。

<g>表示组,用它来包裹其他图形标签能通过控制<g>来统一控制被包裹图形的位置信息等。

<path>也是来绘制线条的,但与<line><polyline>不同,它绘制的线条始终是光滑的(还能绘制曲线,这里不进行赘述)。

<path>有以下几个命令:

Move命令

Move命令即m x yMove命令将画笔移动到坐标为(x,y)的点上。

L命令

L命令即l x y,例:

上例中画笔从坐标(10,10)到(5,30)画了一条红线。

H命令与V命令

H x (or h dx) V y (or v dy)

这两个命令分别绘制垂直线与水平线。

其他更详细内容请移步到svg的在线文档,这里只是简单入门。

另外可以把svg当成普通标签处理,意味着其他标签的一些能做到的动画属性,svg也是可以通过css做到的。

转载地址:https://blog.csdn.net/PeZXO/article/details/105999099 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:在Objective-c里面使用property教程
下一篇:《css揭秘》笔记(三),多重边框

发表评论

最新留言

表示我来过!
[***.240.166.169]2024年03月14日 08时29分20秒