SVG学习笔记
基本写法
<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>
结果
