<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg>
<!-- 矩形
fill:颜色填充
stroke-width：边框宽度
stroke：边框颜色
stroke-dasharray：创建虚线
x,y:左、上的距离
opacity:透明度
rx,ry使矩形产生圆角
-->
<rect x="100" y="50" width="300" height="100" style="fill:rgb(0,0,255);
stroke-width:1; stroke:rgb:(0,0,0)" opacity="0.5"/>
</svg>
<!-- 圆形
cx,cy：圆点的x，y轴，r是半径-->
<svg>
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
<svg>
<!-- 椭圆
cx，cy：椭圆中心x，y坐标；rx，ry：水平，垂直半径-->
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
<svg>
<!-- 直线x1，y1：x2，y2开始与结束的坐标 -->
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
<svg>
<!-- 多边形
points:每个角的坐标-->
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
<svg>
<!-- 曲线 -->
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
<svg>
<!--
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
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
-->
<path d="M150 0 L75 200 L225 200 Z"/>
</svg>
<svg>
<!-- 文本 -->
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">hello world!!!</text>
</svg>
<!-- <defs>定义滤镜 <filter>id属性定义唯一一个滤镜名字
feGaussianBlur：模糊效果
feOffset：创建阴影效果
linearGradient：渐变
radialGradient：放射性渐变-->
<svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
</body>
</html>
<!-- SVG文件嵌套入HTML文档的方法：
<embed src="circle.svg" type="image/svg+xml"/>
<object data="circle.svg" typeee="image/svg+xml"></object>不允许使用脚本
<iframe src="circle.svg"></iframe>
<html>
<body>
<h1>My first SVG</h1>
<svg>
<!-- 矩形
fill:颜色填充
stroke-width：边框宽度
stroke：边框颜色
stroke-dasharray：创建虚线
x,y:左、上的距离
opacity:透明度
rx,ry使矩形产生圆角
-->
<rect x="100" y="50" width="300" height="100" style="fill:rgb(0,0,255);
stroke-width:1; stroke:rgb:(0,0,0)" opacity="0.5"/>
</svg>
<!-- 圆形
cx,cy：圆点的x，y轴，r是半径-->
<svg>
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
<svg>
<!-- 椭圆
cx，cy：椭圆中心x，y坐标；rx，ry：水平，垂直半径-->
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
<svg>
<!-- 直线x1，y1：x2，y2开始与结束的坐标 -->
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
<svg>
<!-- 多边形
points:每个角的坐标-->
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>
<svg>
<!-- 曲线 -->
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
</svg>
<svg>
<!--
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
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
-->
<path d="M150 0 L75 200 L225 200 Z"/>
</svg>
<svg>
<!-- 文本 -->
<text x="0" y="15" fill="red" transform="rotate(30 20,40)">hello world!!!</text>
</svg>
<!-- <defs>定义滤镜 <filter>id属性定义唯一一个滤镜名字
feGaussianBlur：模糊效果
feOffset：创建阴影效果
linearGradient：渐变
radialGradient：放射性渐变-->
<svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3"
fill="yellow" filter="url(#f1)" />
</svg>
</body>
</html>
<!-- SVG文件嵌套入HTML文档的方法：
<embed src="circle.svg" type="image/svg+xml"/>
<object data="circle.svg" typeee="image/svg+xml"></object>不允许使用脚本
<iframe src="circle.svg"></iframe>
-->
用到后再继续深入学习！！！