svg学习笔记
1.rectangle（矩形）
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
width和height 代表矩形的宽度和高度，
x：代表矩形的左边的位置
y：代表矩形的上边的位置
fill 代表矩形填充的颜色，
stroke-width 代表矩形的边框的宽度，
stroke：边框的颜色，
fill-opacity 代表矩形填充颜色的透明度，
stroke-opacity 代表边框颜色的透明度
opacity：代表整个矩形的透明度（包括边框）
rx和ry：代表矩形的四个边角的弯曲程度
2.circle圆形
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="300">
<circle r="60" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
cx与cy代表圆形的圆心离left和top的距离，默认（不设置这两个元素的值）为0
r：代表圆形的半径大小
stroke：圆形边框的颜色
stroke-width：圆形边框的宽度
fill：圆形的填充颜色
3.ellipse椭圆
<!DOCTYPE html>
<html>
<body>
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
cx与cy代表椭圆的圆心离left和top的距离，默认（不设置这两个元素的值）为0
rx：椭圆的水平半径
ry：椭圆的垂直半径
stroke：椭圆边框的颜色
stroke-width：椭圆边框的宽度
4.line 线条
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:0" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
x1和y1:代表开始点的x与y坐标
x2和y2:代表开始点的x与y坐标
5.polygon 多边形
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
points：里面全是各个点的坐标
6.polyline 折线
<!DOCTYPE html>
<html>
<body>
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
points：里面全是各个点的坐标
7.path 路径
M = moveto 开始的点
L = lineto 直线的点
H = horizontal lineto
V = vertical lineto
C = curveto 曲线的点
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath 关闭的点
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
8 text文字
<!DOCTYPE html>
<html>
<body>
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:</text>
<text x="10" y="45" fill="red">First line.</text>
<text x="10" y="70" font-size="20">Second line.</tetx>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
x与y是坐标值
1.rectangle（矩形）
<!DOCTYPE html>
<html>
<body>
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
width和height 代表矩形的宽度和高度，
x：代表矩形的左边的位置
y：代表矩形的上边的位置
fill 代表矩形填充的颜色，
stroke-width 代表矩形的边框的宽度，
stroke：边框的颜色，
fill-opacity 代表矩形填充颜色的透明度，
stroke-opacity 代表边框颜色的透明度
opacity：代表整个矩形的透明度（包括边框）
rx和ry：代表矩形的四个边角的弯曲程度
2.circle圆形
<!DOCTYPE html>
<html>
<body>
<svg height="300" width="300">
<circle r="60" stroke="black" stroke-width="3" fill="red" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
cx与cy代表圆形的圆心离left和top的距离，默认（不设置这两个元素的值）为0
r：代表圆形的半径大小
stroke：圆形边框的颜色
stroke-width：圆形边框的宽度
fill：圆形的填充颜色
3.ellipse椭圆
<!DOCTYPE html>
<html>
<body>
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
cx与cy代表椭圆的圆心离left和top的距离，默认（不设置这两个元素的值）为0
rx：椭圆的水平半径
ry：椭圆的垂直半径
stroke：椭圆边框的颜色
stroke-width：椭圆边框的宽度
4.line 线条
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:0" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
x1和y1:代表开始点的x与y坐标
x2和y2:代表开始点的x与y坐标
5.polygon 多边形
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
points：里面全是各个点的坐标
6.polyline 折线
<!DOCTYPE html>
<html>
<body>
<svg height="180" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
points：里面全是各个点的坐标
7.path 路径
M = moveto 开始的点
L = lineto 直线的点
H = horizontal lineto
V = vertical lineto
C = curveto 曲线的点
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath 关闭的点
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="400">
<path d="M150 0 L75 200 L225 200 Z" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
8 text文字
<!DOCTYPE html>
<html>
<body>
<svg height="90" width="200">
<text x="10" y="20" style="fill:red;">Several lines:</text>
<text x="10" y="45" fill="red">First line.</text>
<text x="10" y="70" font-size="20">Second line.</tetx>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
x与y是坐标值
3464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
