SVG polygon
SVG Polygon技术文档
简介
SVG(Scalable Vector Graphics)是一种用来描述矢量图形的XML标记语言,可用于创建图标、图形和交互式图像等多种场合。其中,<polygon>
标签用于定义一个多边形。多边形是一个闭合的形状,由三个或更多有序点定义,并按照顺序连接所有相邻的点。
语法
<polygon points="x1,y1 x2,y2 x3,y3 ..." />
其中, points
属性由一个空格分隔的一系列 x,y 坐标对组成。x,y 坐标对定义了多边形角落的位置。
下面是一个简单的示例:
<svg width="150" height="150">
<polygon points="20,20 20,120 120,120" />
</svg>
这个示例定义了一个从 (20,20) 开始,经过 (20,120) 和 (120,120) 三个点组成的三角形。其效果如下图所示:
可以通过添加更多点坐标来创建更复杂的形状。例如,下面这个示例创建一个五边形:
<svg width="150" height="150">
<polygon points="75,5 141,53 107,137 43,137 9,53" />
</svg>
其效果如下图所示:
属性
<polygon>
元素支持以下属性:
points
:定义形状的角落坐标。如前所述,这是唯一必填属性。fill
:规定填充颜色,可以为颜色名称、RGB值、十六进制等格式。stroke
:定义轮廓的颜色,同样可以为颜色名、RGB值、十六进制等格式。stroke-width
:定义轮廓的宽度大小。stroke-linejoin
:定义轮廓线条之间的连接方式。可选的值为 “miter” (斜接)、“round” (圆接)和 “bevel” (折角)。stroke-dasharray
:定义虚线的绘制方式。该属性由一些逗号分隔的数字组成,每个数字表示虚线长度和实线长度的交替。
例子
接下来我们来看几个更加复杂的多边形例子:
矩形
矩形是最简单的多边形,由四个顶点组成。下面这个示例创建了一个带有蓝色填充和红色边框的矩形。
<svg width="150" height="150">
<polygon points="20,20 120,20 120,120 20,120"
fill="#0080FF" stroke="#FF0000" stroke-width="4"/>
</svg>
其效果如下图所示:
正六边形
下面这个示例创建了一个正六边形,它的正中央有一个橙色填充的小三角形。
<svg width="150" height="150">
<polygon points="75,5 141,53 141,117 75,165 9,117 9,53"
fill="#FFFFFF" stroke="#444" stroke-width="2"/>
<polygon points="75,48 92,85 58,85" fill="#FFA500" />
</svg>
其效果如下图所示:
不规则多边形
下面这个示例创建了一个不规则多边形,有一个渐变色的填充。为了让边框看起来更加圆润,同时增加视觉深度,我们将其设为圆角。
<svg width="150" height="150">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #FBBD11; stop-opacity: 1" />
<stop offset="100%" style="stop-color: #F5511E; stop-opacity: 1" />
</linearGradient>
</defs>
<polygon points="30,20 80,10 120,70 80,120 30,130"
fill="url(#grad)" stroke="#444" stroke-width="4" stroke-linejoin="round"/>
</svg>
其效果如下图所示:
总结
多边形是 SVG 交互式图形中最重要的形状之一,可以用于创建许多不同的图案和交互元素。掌握多边形的基本语法和属性是理解 SVG 基础的关键之一。