本文共 1605 字,大约阅读时间需要 5 分钟。
SVG简易入门
svg标签
<svg>
标签相当于屏幕的窗口(也就是视口),所有的图形都绘制在这个视口上,可以在svg
标签内通过width
与height
为它设置大小,例:
这里的视口是宽高均为200px的正方形,宽高的长度也可以不使用px
,而是使用相对大小:
这样它的宽高实际上屏幕大小单位,例如px
。
在svg
标签内含有一个属性viewBox
,viewBox
属性定义了视口上可以显示的区域:
上述代码表示viewBox
从(0,0)点开始,100宽100高的区域。这个100100的区域,会放到200*200的画布上显示。于是就形成了放大两倍的效果。(也就是说第一个、第二个参数是起点的坐标,第三、第四个参数是终点的坐标,切记Y轴是从上往下的)。
图形
线段
<line>
标签用于绘制线段:
<line>
标签内有四个属性,x1
、y1
用来表示线段起点的坐标,x2
、y2
用来表示线段终点的坐标。
折线
<polyline>
用来绘制折线:
<polyline>
标签内含有points
属性,用来表示折线的每个端点的坐标,端点横坐标与纵坐标用,
隔开,而每个端点的坐标用空格隔开。
要注意的是<polyline>
标签在绘制折线时,在默认情况下绘制的是一个闭合的图形,即第一个坐标会与最后一个坐标有条连线,被折线包裹的区域会被上色为默认颜色。
矩形
<rect>
用来绘制矩形:
属性x
,y
用来表示矩形左上角端点的坐标,width
和height
用来控制宽度与长度。
多边形
<polygon>
标签用来绘制多边形:
与“折线”相同,points
属性用来确定多边形每个端点的坐标。
圆形
<circle>
标签用来绘制圆形:
<circle>
标签有三个基本属性,cx
、cy
用来表示圆心的坐标,r
用来表示圆的半径。
椭圆
<ellipse>
标签用来绘制椭圆:
<ellipse>
标签的cx
、cy
表示椭圆的中心坐标,rx
、ry
分别横轴的半长与纵轴的半长。
图形的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>
的x
、y
表示文字区块的基线的起点文字的,文字样式可以在css中设置。
<g>
表示组,用它来包裹其他图形标签能通过控制<g>
来统一控制被包裹图形的位置信息等。
<path>
也是来绘制线条的,但与<line>
、<polyline>
不同,它绘制的线条始终是光滑的(还能绘制曲线,这里不进行赘述)。
<path>
有以下几个命令:
Move命令
Move
命令即m x y
,Move
命令将画笔移动到坐标为(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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!