运用SVG实现一个渐变对象效果。
实现效果如下：
实现代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG绘图渐变对象</title>
<style>
body {
text-align: center;
}
svg {
background: #ddd;
}
</style>
</head>
<body>
<h1>SVG绘图渐变对象</h1>
<svg id="s9" width="500" height="400">
<defs>
<linearGradient id="g0" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="red"></stop>
<stop offset="1" stop-color="red" stop-opacity="0"></stop>
</linearGradient>
<linearGradient id="g1" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="green"></stop>
<stop offset="1" stop-color="green" stop-opacity="0"></stop>
</linearGradient>
<linearGradient id="g2" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="blue"></stop>
<stop offset="1" stop-color="blue" stop-opacity="0"></stop>
</linearGradient>
</defs>
<rect width="50" height="100" x="100" y="50" fill="url(#g0)"></rect>
<rect width="50" height="300" x="200" y="50" fill="url(#g1)"></rect>
<rect width="50" height="200" x="300" y="50" fill="url(#g2)"></rect>
</svg>
</body>
</html>
