svg polygon多边形的画法_svg如何画多边形【svg教程】
下面介绍svg画多边形的方法，使用polygon标签来画多边形
polygon标签介绍：
polygon:画多边形标签
points：多边形组成的坐标点
fill：长方形的填充颜色
stroke：长方形的边框颜色
stroke-width：边框宽带
fill-opacity：长方形的透明度
stroke-opacity：边框的透明度
fill-rule：的属性值有nonzero，evenodd两种
nonzero:本规则决定一个点是否在图形内部的方法是从该点向任意方向画直线，然后检查直线与图形的交叉。如果该点左右与图形交叉点数相同，则该点在图形外，否则在图形内。
evenodd:本规则通过从一点向任意方向画直线然后计算该直线与图形的交叉电的数量来决定该点是否在图形内。如果交叉点数为奇数，则该点在图形内，否则在图形外。
svg画多边形的实例代码，使用polygon画五角星如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>svg 多边形的画法</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<text x="20" y="30" style="fill: #000; font-size: 24px">
Eigenschaft fill-rule</text>
<polygon points="122 59,72 205,194 114,49 114,171 205"
style="fill-rule: nonzero; fill: #CFC; stroke: #000"/>
<polygon points="321 60,271 206,393 115,248 115,370 206"
style="fill-rule: evenodd; fill: #CFC; stroke: #000"/>
<text x="90" y="240" style="fill: #090; font-size: 16px">
nonzero</text>
<text x="290" y="240" style="fill: #090; font-size: 16px">
evenodd</text>
</svg>
</svg>
</body>
</html>
svg画多边形的效果图：
来源：//作者：admin/更新时间：2013-12-03
顶
踩
相关文章：
