基础

1 .svg的代码都是放在顶层标签svg中
2 .width,height指定了svg图像在html元素中所占的宽度和高度,除了相对单位,也是可以使用绝对单位。默认是150*150px
3 .viewbox:显示svg的视口
4 .class
5 .style这俩都是可以设置样式的
6 .fill,stroke,stroke-width这三个属性
7 .fill-opacity:填充颜色的特命都
8 .stroke-opacity:边框的透明度。
9 .这俩不能使用rgba实现么?

circle

1 .cx:圆形的x坐标
2 .cy:坐标是相对于svg画布的左上角原点
3 .r:圆的半径

line

1 .绘制一条直线
2 .x1,y1:线段起点的横坐标和纵坐标
3 .x2,y2:线段终点的横坐标和纵坐标
4 .

polyline

1 .绘制一条折线
2 .points:指定了每个端点的坐标
3 .横纵坐标之间用逗号分隔,点和点之间用空格分割。
4 .

rect

1 .绘制一个矩形
2 .x,y 左上角那个点的坐标
3 .height,width 矩形的大小
4 .rx,ry给矩形加圆角

ellipse

1 .绘制一个椭圆
2 .cx,cy椭圆中心的横坐标和纵坐标
3 .rx,ry 椭圆横向轴和纵向轴的半径
4 .

polygon

1 .绘制一个多边形,不少于三个边
2 .points"横纵坐标之间用逗号分隔,点与点之间用空格分隔。
3 .fill-rule:指定使用哪一种算法去判断画布上的该区域是否属于该图形内部。主要是用于判断复杂或者自相交,一个子路径包含另一个子路径等特殊情况
4 .

path

1 .绘制一条路径
2 .d表示绘制顺序,每一个字母表示一个绘制动作,后面跟着坐标
3 .M:移动到(moveto)
4 .L:画直线到(lineto)
5 .z:闭合路径
6 .a:代表一个弧线 rx:水平上的半径 ry:垂直方向上的半径 x-axis-rotataion:x轴上的旋转,一半不需要改变这个参数,默认值是0 large-arc-flag:决定使用绘制的比较大的弧线还是绘制比较小的弧线。 sweep-flag 决定是否延开始点到结束点的直线来镜像弧线。
7 .q:绘制二次贝兹曲线,
8 .c:三次贝兹曲线
9 .h: 绘制一条水平直线到参数指定的x坐标点
10 .v:从当前位置绘制一条垂直直线到参数指定的y坐标,y坐标相对于当前画笔的y坐标
11 .s :平滑过渡曲线 cx,cy,x,y
12 .

text

1 .用于绘制文本
2 .x,y:文本区域基线起点的横坐标和纵坐标
3 .textPath:实现路径文字
4 .tspan:元素可以安排任何分小组与tspan元素的数量。每个tspan可以包含不同的格式和位置。
5 .a标签里面可以加文字,做成链接文字

use

1 .用于复制一个已有的形状
2 .

g

1 .将多个形状组成一个组,方便复用,比如搭配上面那个组。类似于ps的图层,一个g内通常只会放一些高聚合的图形,这样很方便移动和动画。使用g标签包裹的所有子元素都认为同一组
2 .分组动画:分组重定义动画是直接写在transform属性当中的。实际上每个子标签都可以使用transform标签

anime

1 .需要动画的svg元素作为他的父元素,anime可以使用多个,作用于元素的不同属性
2 .用于产生动画
3 .attributeName:发生动画效果的属性名
4 .from:单次动画的初始值
5 .to:单次动画的结束值
6 .dur:单词动画的持续时间
7 .repeatCount:动画的循环模式

animeTransform

1 .针对的是css的transform属性
2 .

1 .iframe,object标签都是可以导入svg标签,而且允许使用脚本语言控制

stroke属性

1 .所有stroke属性,可应用与任何种类的线条,文字和元素就像一个圆的轮廓
2 .stroke
3 .stroke-width:文字或元素轮廓厚度
4 .stroke-linecap:不同类型的开放路径的终结。路径连接的样式
5 .stroke-dasharray:用于创建虚线,类似solid的不同类型
6 .

你可能感兴趣的:(基础)