SVG:
需求1:画一个三角形
需求2:画一个五角星
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
text-align: center;
}
svg{
background: #ddd;
}
</style>
</head>
<body>
<svg id="svg" width="500" height="400">
<!--折线-->
<polyline points="250,200 300,200 300,300 250,200" fill="#ddd" stroke="#f00"></polyline>
<!--五角星-->
<polyline points="300,350 375,350 300,395 350,315 350,395 300,350" fill="#ddd" stroke="#f00"></polyline>
</svg>
</body>
</html>SVG:
需求1:线性渐变
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
text-align: center;
}
svg{
background: #ddd;
}
</style>
</head>
<body>
<svg id="svg" width="500" height="400">
<!--定义渐变对象-->
<defs>
<!--线性渐变对象-->
<linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="red"></stop>
<stop offset="50%" stop-color="green"></stop>
<stop offset="100%" stop-color="yellow"></stop>
</linearGradient>
</defs>
<!--应用渐变对象-->
<rect x="0" y="0" width="270" height="270" fill="url(#linearGradient)"></rect>
</svg>
</body>
</html>SVG:
需求1:滤镜效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
text-align: center;
}
svg{
background: #ddd;
}
</style>
</head>
<body>
<svg id="svg" width="500" height="400">
<defs>
<!--模糊滤镜-->
<filter id="filter">
<feGaussianBlur stdDeviation="3">
</feGaussianBlur>
</filter>
</defs>
<!--将模糊滤镜定义文本-->
<text font-size="30" x="30" y="50">
亮哥买豪华版五菱宏光
</text>
<text font-size="30" x="30" y="90" filter="url(#filter)">
东哥买丐版幻影
</text>
</svg>
</body>
</html>