<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #f0f0f0;
}
</style>
</head>
<body>
<h3>svg绘制折线</h3>
<svg width="400" height="400" id="s12">
<polyline id="p2" points="50,150 350,150 100,300 200,50" stroke="#f00" fill="yellow"></polyline>
</svg>
<script>
p2.onmouseover = function(){
this.setAttribute('stroke-width', 5);
}
p2.onmouseout = function(){
this.setAttribute('stroke-width', 1);
}
</script>
</body>
</html>
这个可能不能够满足你的要求啊,动态画直线,可是点都变了啊,这个怎么动态创建呢?你是想用ajax动态获取吗?