SVG基本图形
在HTML中<SVG>元素是⽤来画图的，下⾯是⼀个SVG的例⼦：
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
svg图<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
</svg>
</body>
</html>
在上⾯这个例⼦中⾸先通过<SVG>元素的width和height属性来指定画布的宽度和⾼度
⽹页的左上⾓是画布的原点，向右为x轴⽅向，向下为y轴⽅向
<circle>元素代表⼀个圆，cx和cy代表圆⼼的坐标; r代表圆的半径;stroke代表圆形边框线的颜⾊
stroke-witdth代表边框线的粗细，fill代表内部填充⾊。
上⾯的例⼦执⾏的效果如下：
<svg width="400" height="100">
<rect width="400" height="100" />
</svg>
这个例⼦是画⼀个矩形，<rect>元素代表矩形，width和height代表矩形宽度和⾼度，恰好和画布⼤⼩⼀样
style=
"fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"
这句话中style属性指定了矩形的样式（在标签⾥给style属性赋值的做法被称为内联CSS，后⾯CSS部分会讲）
fill代表内部填充⾊，采⽤RGB形式（RGB就是通过红绿蓝三原⾊的不同值来表⽰各种颜⾊）stroke-width代表矩形边框线的粗细
stroke代表矩形边框线的颜⾊
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
/>
</svg>
上⾯这段代码是画⼀个圆⾓矩形，x和y属性指定矩形左上⾓的坐标，
rx和ry属性指定圆⾓的弧度，rx和ry越⼤代表弧度越⼤，越接近圆形
width和height代表矩形的宽度和⾼度
在style属性中opacity代表不透明度，越⼤越不透明
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
/>
</svg>
上⾯这个例⼦是画⼀个多边形（五⾓星）
points指定多边型的顶点，具体画法是⾸尾相连的直线线段构成的闭合多边形形状。最后⼀点连接到第⼀点
fill指的是内部填充⾊
fill-rule指的是填充⽅式，其中evenodd值意思是只填充内部，
具体的说是要判断⼀个点是否在图形内，该点作任意⽅向的⼀条射线，然后检测射线与图形路径的交点的数量。如果结果是奇数则认为点在内部，是偶数则认为点在外部。
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" />
</svg>
上⾯的代码是画⼀条直线，x1和y1是直线的起点，x2和y2是直线的终点。
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
/>
</svg>
上⾯的代码通过<polyline>元素画了⼀条由线段组成的台阶，注意和五⾓星例⼦中的<polygon>元素不同
<polyline>元素不会⾃动把最后⼀点连接到第⼀个点
<path>元素⽤来画⼀条路径，在<path>元素中⽤⼀些常⽤的关键字如下：
M代表移动到某个点
L代表连⼀条直线到某个点
Z代表从终点连接回起点
所有和外观⽆关的信息都以字符串的形式赋给d属性。
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" stroke="red"
stroke-width="3" fill="none"/>
这段代码的意思是移动到（150,0），然后从(150,0)出发连接⼀条直线到(75,200)，再从(75,200)连接⼀条直线到终点(225,200)
最后从终点连接出发点
线条颜⾊红⾊，线条宽度3像素，不填充内部区域（fill="none"）
<svg height="30" width="200">
<text x="0" y="15" fill="red">I love SVG!</text>
</svg>
上⾯这段代码是在(0,15)的位置⽤红⾊写出"I Love SVG"
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50" />
</svg>
上⾯这段代码是画⼀个椭圆，cx,cy代表圆⼼坐标，rx和ry代表横轴和纵轴的长度。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。