1、svg在html中的几种引用
<!--嵌入式(opera不支持)--> <svg xmlns="http://www.w3.org/2000/svg"> <!--cx=圆心距离svg右边框的距离,即圆心的x坐标 cy=圆心距离svg左边框的距离,即圆心的y坐标 r=圆的半径 --> <circle cx="53" cy="53" r="50" stroke="#f00" stroke-width="3" fill="none"></circle> </svg> <!--优势:所有主要浏览器都支持,并允许使用脚本 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)--> <!--<embed src="xx.svg" type="image/svg+xml"></embed>--> <!--优势:所有主要浏览器都支持,并支持HTML4,XHTML和HTML5标准 缺点:不允许使用脚本。--> <!--<object data="xx.svg" type="image/svg+xml"></object>--> <!--优势:所有主要浏览器都支持,并允许使用脚本 缺点:不推荐在HTML4和XHTML中使用(但在HTML5允许)--> <!--<iframe src="xx.svg"></iframe>--> <!--还可以用<a>标签链接到一个SVG文件--> <!--<a href="xx.svg">View SVG file</a>-->
2、svg 路径绘制
M = moveto(M X,Y) 将画笔移动到指定的坐标位置
L = lineto(L X,Y) 画直线到指定的坐标位置
H = horizontal lineto(H X) 画水平线到指定的X坐标位置
V = vertical lineto(V Y) 画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY) 三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Bézier curve(Q X,Y,ENDX,ENDY) 二次贝赛曲线
==>X,Y为控制点的位置
==>ENDX,ENDY终点的位置
T = smooth quadratic Bézier curveto(T ENDX,ENDY) 映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) 弧线
==>RX,RY指所在椭圆的半轴大小
==>XROTATION椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
==>FLAG1只有两个值,1表示大角度弧线,0为小角度弧线
==>FLAG2只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针
==>X,Y为终点坐标
Z = closepath 关闭路径
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位
3、绘制矩形(rect)
(1)rx
和ry
属性用于决定矩形圆角的大小
(2)stroke-dasharray 可以将矩形的边框设置成虚线
一个参数时: 表示一段虚线长度和每段虚线之间的间距
两个参数或者多个参数时:一个表示长度,一个表示间距
(3)stroke-linejoin描边转角的表示方式
有三种方式:miter(直角)、round(圆角)、bevel(斜角)
(4)stroke-opacity描边透明度
(5)stroke-linecap描边端点表现形式
有三种方式:butt、round、spuare
(6)fill-opacity填充矩形背景色的透明度
(7)stroke-width描边的线条宽度
(8)fill填充色
(9)stroke描边色
4、绘制圆形(circle)
设置和矩形一致
如果要把圆形设置成椭圆的话,不设置人,设置rx和ry
5、绘制直线(line)
设置和矩形一致
x1,y1设置起点坐标,x2,y2设置终点坐标
6、绘制折线(polyline)
设置和矩形一致
points里面放相应的坐标x和y用,隔开,组与组之间用空格隔开
7、绘制多边形(polygon)
设置和矩形一致
points里面放相应的坐标x和y用,隔开,组与组之间用空格隔开
8、连接标记(markers)
用于标记一条线或者路径的开始、中间、结束位置,路径的开始可以使用圆形或者方向表示,路径的结束可以使用三角箭头表示
(1)markerWidth、markerHeight设置宽、高
(2)refX、refY标记顶点连接的位置
(3)在<marker></marker>里面绘制路径
(4)在p路径上 marker-start: url(#markerCircle);marker-end: url(#markerArrow);marker-mid: url(#markerCircle);来设置起点和终点和中间
(5)marker设置orient
=
"auto"来让图形自适应不同角度的直线
(6)<marker>
元素的markerUnits
属性的值为strokeWidth对标记进行缩放来适应路径描边的大小
9、绘制文字(text)
(1)text-anchor 设置文字的位置
有三个可选参数:start、middle、end
(2)letter-spacing:文字的间距
(3)kerning:字距调整
(4)word-spacing:单词的间距
(5)transform
=
"rotate(30 20,40)"旋转文字
(6)writing-mode:tb设置文字为垂直
但是英文的时候,字母也被旋转了90度,需要设置glyph-orientation-vertical:90
(7)direction:ltr,rtl
但是英文的时候,字母也会被渲染,需要设置unicode-bidi: bidi-override
10、tspan
dx、dy使一行文本相对于上一行文字定位,如果了里面传多个值的话,那么每一个数字会被应用到每一个字符上
11、textPath绘制 文字路径
xlink:href="#MyPath"指定绘制的路径
但是在svg上面要加上
xmlns:xlink="http://www.w3.org/1999/xlink"
不然图片会生成不了
12、switch
用来绘制文字的, 来匹配不同的语言,在不同的浏览器语言环境中显示不同的SVG文字,但是你不可以用它来显示不同的图形
13、image
这个不知道为什么,用js动态生成的才可以显示出来图片,直接用svg绘制的不可以
14、defs:预定义一个元素,使其能在svg图像中重复使用
在defs中定义的图形,不会直接显示在svg图像上,要显示他们需要使用use元素来引入他们
15、绘制路径(path)
d属性包含了绘制的命令,M代表移动到,A代表弧线,L代表直线
M:是指画笔落下的位置,从这个地方开始绘制
A:绘制弧线:(水平半径,垂直半径,x轴方向上的旋转(默认0),大小弧线(0小、1大),旋转方向(1顺,0逆))
Z:闭合路径,从最后一个会致电连接到开始点
注意:如果你重复多次连续使用同一个命令,可以可以将其省略,只写后面的参数即可
16、贝塞尔曲线
(1)二次贝塞尔曲线(Q):(控制点x坐标,控制点y坐标 终点x坐标,终点y坐标)
(1)三次贝塞尔曲线(C):(控制点1x坐标,控制点1y坐标 控制点2x坐标,控制点2y坐标 终点x坐标,终点y坐标)
17、添加css样式
(1)内联样式,也可以给每个图形添加class类
<style type="text/css" > <![CDATA[ circle { stroke: #006600; fill: #00cc00; } ]]> </style>
(2)外部样式
<?xml-stylesheet type="text/css" href="svg-style.css" ?>
把这个放在svg标签上面
18、决定复杂的图形如何进行填充(fill-rule)
(1)nonzero:
(2)evenodd:
19、viewport
在svg元素中使用width
和height
属性来指定viewport的尺寸
在SVG中支持的长度单位有:em
、ex
、pt
、px
、、
pc
、cm
、mm
、in
和百分比值
20、viewBox
在svg元素中使用viewBox