2.3 KiB
2.3 KiB
title | localeTitle |
---|---|
SVG Shapes | SVG形状 |
SVG形状
可以使用SVG绘图创建多个形状。 SVG绘图可以使用和组合七种形状:路径,矩形,圆形,椭圆形,直线,折线和多边形。
路径
path
元素是最常见的,通常由用于导出SVG代码的程序生成。
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
上面的示例path
在SVG绘图中使用时将生成“加”符号(+)。 SVG path
元素不是手动构建的,而是通过可以操作矢量图形的设计程序生成的,例如Illustrator或Inkscape。
长方形
矩形元素rect
在屏幕上绘制一个矩形,它接受六个属性。
<rect x="0" y="0" width="100" height="50" rx="10" ry="10" />
x
和y
指定矩形左上角的位置, width
和height
指定矩形的大小。 rx
和ry
指定矩形角的半径,类似于CSS border-radius属性。
圈
圆元素circle
接受三个属性。
<circle cx="100" cy="100" r="50" />
cx
和cy
指定圆心的位置, r
指定圆的半径(大小)。
椭圆
椭圆元素ellipse
与circle
元素类似,只是半径被分成两个属性。
<ellipse cx="100" cy="100" rx="50" ry="20" />
同样, cx
和cy
指定椭圆中心的位置,现在rx
和ry
指定椭圆的水平和垂直半径。较大的rx
将给出“胖”椭圆,而较大的ry
将给出更细的椭圆。如果rx
和ry
相等,它将形成一个圆。
线
line
元素很简单,并且接受四个属性。
<line x1="0" x2="100" y1="50" y2="70" />
x1
和y1
属性指定行的第一个点, x2
和y2
属性指定行的第二个点。
折线
polyline
是一系列连接的直线,在单个属性中指定。
<polyline points="0 100, 50 70, 60 40, 20 0" />
points
属性指定一个点列表,每个点用逗号分隔。
多边形
polygon
元素也是一系列连接的直线,但在这种情况下,最后一行将自动重新连接到初始点。
<polygon points="0 100, 50 70, 60 40, 20 0" />
此示例将绘制与上面的polyline
相同的形状,但它将绘制一条额外的线以“关闭”一系列线条。
更多信息
MDN文档: MDN