基本写法
<svg width="100%" height="100%"> <!-- SVG markup here. --> </svg>
带markup example
<svg width="100%" height="100%" > <circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" /> </svg>
结果
基本形状
<html> <head> <title></title> <style> *{margin:0; padding:0;} html, body{height:100%; width:100%;} </style> </head> <body> <svg width="200" height="250"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transparent" stroke-width="5"/> <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> </svg> </body> </html>
结果如下
矩形 - rect元素
这个元素有6个控制位置和形状的属性,分别是:
x:矩形左上角的坐标(用户坐标系)的x值。
y:矩形左上角的坐标(用户坐标系)的y值。
width:矩形宽度。
height:矩形高度。
rx:实现圆角效果时,圆角沿x轴的半径。
ry:实现圆角效果时,圆角沿y轴的半径。
比如上面例子中,实现了圆角效果,你也可以通过设置rx,ry为不同的值实现椭圆角效果。
圆 - circle元素
这个元素的属性很简单,主要是定义圆心和半径:
r:圆的半径。
cx:圆心坐标x值。
cy:圆心坐标y值。
椭圆 - ellipse元素
这个是更加通用的圆形元素,你可以分别控制半长轴和半短轴的长度,来实现不同的椭圆,很容易想到,当两个半轴相等时,就是正圆形了。
rx:半长轴(x半径)。
ry:半短轴(y半径)。
cx:圆心坐标x值。
cy:圆心坐标y值。
直线 - line元素
直线需要定义起点与终点即可:
x1:起点x坐标。
y1:起点y坐标。
x2:终点x坐标。
y2:终点y坐标。
折线 - polyline元素
折线主要是要定义每条线段的端点即可,所以只需要一个点的集合作为参数:
points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。
多边形 - polygon元素
这个元素就是比polyline元素多做一步,把最后一个点和第一个点连起来,形成闭合图形。参数是一样的。
points:一系列的用空格,逗号,换行符等分隔开的点。每个点必须有2个数字:x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成:"0 0, 1 1, 2 2"。
路径 - path元素
这个是最通用,最强力的元素了;使用这个元素你可以实现任何其他的图形,不仅包括上面这些基本形状,也可以实现像贝塞尔曲线那样的复杂形状;此外,使用path可以实现平滑的过渡线段,虽然也可以使用polyline来实现这种效果,但是需要提供的点很多,而且放大了效果也不好。这个元素控制位置和形状的只有一个参数:
d:一系列绘制指令和绘制参数(点)组合成。
绘制指令分为绝对坐标指令和相对坐标指令两种,这两种指令使用的字母是一样的,就是大小写不一样,绝对指令使用大写字母,坐标也是绝对坐标;相对指令使用对应的小写字母,点的坐标表示的都是偏移量。
文本与图像
直接显示文本
<html> <head> <title></title> <style> *{margin:0; padding:0;} html, body{height:100%; width:100%;} </style> </head> <body> <svg width="500" height="500"> <rect width="300" height="200" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> </body> </html>
文本区间-tspan元素
x,y用于设置包含的文本的绝对坐标值,这个值会覆盖默认的文本位置。这些属性可以包含一系列数字,这些数字会应用到每个对应的单个字符。没有对应设置的字符会紧跟前一个字符。
dx,dy用于设置包含的文本相对于默认的文本位置的偏移量。这些属性同样可以包含一系列数字,每个都会应用到对应的字符。没有对应设置的字符会紧跟前一个字符。
rotate用于设置字体的旋转角度。这个属性页可以包含一系列数字,应用到每个字符。没有对应设置的字符会使用最后设置的那个数字。
<html> <head> <title></title> <style> *{margin:0; padding:0;} html, body{height:100%; width:100%;} </style> </head> <body> <svg width="500" height="500"> <text x="10" y="10">Hello World! <tspan x="100 200 300" font-weight="bold" fill="red">This is bold and red</tspan> </text> <text x="10" y="30">Hello World! <tspan rotate="10 20 45" font-weight="bold" fill="red">This is bold and red</tspan> </text> </svg> </body> </html>
结果
文本路径-textPath元素
这个元素从它的xlink:href属性获取指定的路径并把文本对齐到这个路径上
<html> <head> <title></title> <style> *{margin:0; padding:0;} html, body{height:100%; width:100%;} </style> </head> <body> <svg width="500" height="500"> <path id="my_path" d="M 20,20 C 40,40 80,40 100,20" stroke="green" fill="green" /> <text> <textPath xlink:href="#my_path">This text follows a curve.</textPath> </text> </svg> </body> </html>
渐变
线性渐变
<html> <head> <title></title> <style> *{margin:0; padding:0;} html, body{height:100%; width:100%;} </style> </head> <body> <svg width="120" height="240"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/> <stop offset="100%" stop-color="blue"/> </linearGradient> <style type="text/css"> <![CDATA[ #rect1 { fill: url(#Gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]> </style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/> </svg> </body> </html>
结果
在这个例子中,我们需要注意:
1. 渐变色元素必须要放到defs元素中;
2. 需要给渐变色元素设置id值,否则的话,别的元素无法使用这个渐变色。
3. 渐变色的成员使用stop定义,它的属性也可以使用CSS定义;它支持class,id这种标准HTML都支持的属性。其它常用属性如下:
---offset属性:这个定义了该成员色的作用范围,该属性取值从0%到100%(或者是0到1);通常第一种颜色都是设置成0%,最后一种设置成100%。
---stop-color属性:这个很简单,定义了该成员色的颜色。
---stop-opacity属性:定义了成员色的透明度。
---x1,y1,x2,y2属性:这两个点定义了渐变的方向,默认不写的话是水平渐变,上面例子中同时也创建了一个垂直渐变。
4. 渐变色的使用,如例子中所示,直接用url(#id)的形式赋值给fill或者stroke就可以了。
5. 渐变色成员的复用:你也可以使用xlink:href引用定义过的渐变色成员,所以上面的例子也可以改写如下:
<linearGradient id="Gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1" xlink:href="#Gradient1"/>
环形渐变
<html> <head> <title></title> <style> *{margin:0; padding:0;} html, body{height:100%; width:100%;} </style> </head> <body> <svg width="120" height="240"> <defs> <radialGradient id="Gradient3"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialGradient> <radialGradient id="Gradient4" cx="0.25" cy="0.25" r="0.25"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialGradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient3)"/> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient4)"/> </svg> </body> </html>
结果如下
offset属性:这个和线性渐变的值是一样,但是含义不一样。在环形渐变中,0%代表圆心处,这个很好理解。
cx,cy,r属性:其实也很好理解,环形渐变,当然要定义环的圆心和半径了,体会一下上面例子中圆的大小和位置就能理解了。
fx,fy属性:定义颜色中心(焦点)处的位置,也就是渐变色最浓处的坐标,在上面例子中,红色最红的是圆心,这是默认效果;如果想改变一下,就可以设置fx,fy坐标值。
纹理填充
<html> <head> <title></title> <style> *{margin:0; padding:0;} html, body{height:100%; width:100%;} </style> </head> <body> <svg width="200" height="200"> <defs> <linearGradient id="Gradient6"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="blue"/> </linearGradient> <linearGradient id="Gradient7" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="orange"/> </linearGradient> </defs> <defs> <pattern id="Pattern" x=".05" y=".05" width=".25" height=".25"> <rect x="0" y="0" width="50" height="50" fill="skyblue"/> <rect x="0" y="0" width="25" height="25" fill="url(#Gradient7)"/> <circle cx="25" cy="25" r="20" fill="url(#Gradient6)" fill-opacity="0.5"/> </pattern> </defs> <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/> </svg> </body> </html>
结果