<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Raphael线性渐变</title>
<style>
#liner{
border: 1px solid red;
width: 200px;
height: 100px;
}
</style>
<script src="js/raphael.js"></script>
<script>
function createLiner(){
var root=document.getElementByIdx_x("liner");
var paper=Raphael(root,200,100);
var rect1=paper.rect(10,0,80,80,20);
rect1.attr({
gradient:"0-#9ACD32-#FFFF00",
stroke:"none"
});
var rect2=paper.rect(100,0,80,80,20);
rect2.attr({
gradient:"888-#9ACD32-#FFFF00",
stroke:"none"
});
}
</script>
</head>
<body οnlοad="createLiner()">
<h3>Raphael线性渐变</h3>
<div id="liner"></div>
</body>
</html>