SVG初探
1.HTML5中使用SVG
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在HTML5中使用SVG</title>
</head>
<body>
<!--
直接定义<svg>元素：
* id属性：标示
* width和height属性：宽度和高度
注意：
* 只使用<svg>元素，显示时无任何效果
与Canvas的区别：
* 在svg中绘制图像的话，定义元素来完成
-->
<svg id="svg" width="400" height="300">
<rect x="100" y="100" width="100" height="100" fill="yellow" stroke="red"></rect>
<!--
SVG及相关元素不能使用CSS内容
-->
<rect x="300" y="100" width="100" height="100" style="fill:rgb(180,56,97);stroke:rgb(54,175,169);"></rect>
</svg>
</body>
</html>
效果图
2.圆形
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圆形</title>
</head>
<body>
<svg width="400" height="300">
<circle cx="100" cy="100" r="100" fill="yellow" stroke="blue"></circle>
</svg>
</body>
</html>
效果图
3.椭圆、渐变色椭圆
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>椭圆</title>
</head>
<body>
<svg width="400" height="400">
<ellipse cx="150" cy="150" rx="150" ry="50"></ellipse>
</svg>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>.....</title>
</head>
<body>
<svg width="500" height="500">
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%"
x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg>
</body>
</html>
效果图
4.线条
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>线条</title>
</head>
<body>
<svg width="400" height="400">
<line x1="100" y1="100" x2="200" y2="200" stroke="blue" stroke-width="10" ></line>
</svg>
</body>
</html>
效果图
5.折线
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>折线</title>
</head>
<body>
<svg width="400" height="300">
<polyline points="90,100 70,150 20,150 50,180" stroke="red" fill="white"></polyline>
</svg>
</body>
</html>
效果图
6.多边形
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>多边形</title>
</head>
<body>
<svg width="400" height="400">
<polygon points="220,100 300,210 170,250" fill="yellow" stroke="red"></polygon>
</svg>
</body>
</html>
效果图
代码
<html>
<head>
<meta charset="utf-8">
<title>折线</title>
</head>
<body>
<svg width="400" height="300">
<polyline points="101 100,166 84,196 20,219 83,287 95,231 139,256 194,193 173,131 195,160 139,100 99" stroke="red" fill="yellow"/>
</svg>
</body>
</html>
效果图
7.绘制线性渐变、滤镜
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绘制线性渐变</title>
</head>
<body>
<svg width="400" height="300">
<defs>
<linearGradient id="myline" x1="10%" y1="10%" x2="100%" y2="10%">
<stop offset="0%" stop-color="yellow"></stop>
<stop offset="50%" stop-color="red"></stop>
<stop offset="100%" stop-color="blue"></stop>
</linearGradient>
</defs>
<rect x="10" y="10" width="100" height="100" style="fill:url('#myline')"></rect>
</svg>
</body>
</html>
效果图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVG练习</title>
</head>
<body>
<svg width="400" height="300">
<defs>
<!-- 设置渐变 -->
<linearGradient id="myLine" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="blue"></stop>
</linearGradient>
<!-- 设置滤镜 -->
<filter id="myFilter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2"></feGaussianBlur>
</filter>
</defs>
<rect x="10" y="10" width="200" height="100" style="fill:url(#myLine);filter:url(#myFilter)"></rect>
</svg>
</body>
</html>
效果图
8.高斯模糊
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高斯模糊</title>
</head>
<body>
<svg width="400" height="300">
<!-- 该元素表示绘制图形设置相关内容 -->
<defs>
<!--
该元素表示使用的是滤镜
* id属性：唯一值，方便后面调用
-->
<filter id="myFilter">
<!--
该元素表示使用高斯模糊
* in="SourceGraphic"
* stdDeviation属性值为数字
-->
<feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
<rect x="10" y="10" width="100" height="100" style="filter:url(#myFilter)"></rect>
</svg>
</body>
</html>
效果图