代碼如下所示：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
height:300px;
border:1px solid black;
}
polyline{
stroke:red; /*顏色*/
stroke-width:2; /*半徑*/
stroke-dasharray:1160; /*總線段長*/
stroke-dashoffset:1160; /* 線段未繪製長度 */
transition:.5s;
fill:none; /*內容*/
}
div#div1:hover polyline{
stroke-dashoffset:0;
}
</style>
</head>
<body>
<div id="div1">
<svg height="213" width="428">
<polyline points="9,9 409,9 409,189 9,189 9,9"></polyline>
</svg>
</div>
</body>
</html>效果圖如下所示：
