2.3 KiB
2.3 KiB
title, localeTitle
| 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