代码如下所示:
<!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>
效果图如下所示:
最后
以上就是傻傻洋葱最近收集整理的关于使用SVG进行矩形描边的全部内容,更多相关使用SVG进行矩形描边内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复