svg矩形参数_SVG矩形和其他SVG形状

svg矩形参数

Several shapes can be created using SVG drawing. An SVG drawing can use and combine seven shapes: Path, Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.

使用SVG绘图可以创建多个形状。 SVG工程图可以使用和组合七个形状：路径，矩形，圆形，椭圆形，直线，折线和多边形。

路径 (Path)

The path element is the most commonly seen, and is usually generated by programs designed to export SVG code.

path元素是最常见的元素，通常由旨在导出SVG代码的程序生成。

<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />

The example path above will generate a “plus” symbole (+) when used inside an SVG drawing. SVG path elements are not built manually, but generated through design programs that can manipulate vector graphics, such as Illustrator or Inkscape.

上面的示例path在SVG工程图中使用时将生成一个“加号”(+)。 SVG path元素不是手动构建的，而是通过可操纵矢量图形的设计程序生成的，例如Illustrator或Inkscape。

长方形 (Rectangle)

The rectangle element rect draws a rectangle on the screen, and it accepts six attributes.

矩形元素rect在屏幕上绘制一个矩形，它接受六个属性。

<rect x="0" y="0" width="100" height="50" rx="10" ry="10" />

x and y assign the position of the top-left corner of the rectangle, and width and height assign the size of the rectangle. rx and ry assign the radius of the rectangle corners, similar to the CSS border-radius property.

x和y指定矩形左上角的位置，而width和height指定矩形的大小。 rx和ry分配矩形角的半径，类似于CSS border-radius属性。

圈 (Circle)

The circle element circle accepts three attributes.

circle元素circle接受三个属性。

<circle cx="100" cy="100" r="50" />

cx and cy assign the position of the center of the circle, and r assigns the radius (size) of the circle.

cx和cy指定圆心的位置，而r指定圆的半径(大小)。

椭圆 (Ellipse)

The ellipse element, ellipse, is similar to the circle element except the radius is split into two attributes.

椭圆元素ellipse与circle元素相似，只不过半径被分为两个属性。

<ellipse cx="100" cy="100" rx="50" ry="20" />

Again, cx and cy assign the position of the center of the ellipse, and now rx and ry assign the horizontal and vertical radius of the ellipse, respectively. A larger rx will give a “fat” ellipse, and a larger ry will give a skinnier ellipse. If rx and ry are equal, it will form a circle.

同样， cx和cy指定椭圆中心的位置，现在rx和ry指定椭圆的水平和垂直半径。 较大的rx将给出“胖”椭圆，而较大的ry将给出更瘦的椭圆。 如果rx和ry相等，它将形成一个圆圈。

线 (Line)

The line element is simple, and accepts four attributes.

line元素很简单，并且接受四个属性。

<line x1="0" x2="100" y1="50" y2="70" />

The x1 and y1 attributes assign the first point of the line, and the x2 and y2 attributes assign the second point of the line.

x1和y1属性指定线的第一点， x2和y2属性指定线的第二点。

折线 (Polyline)

A polyline is a series of connected straight lines, assigned in a single attribute.

polyline是在单个属性中分配的一系列连接的直线。

<polyline points="0 100, 50 70, 60 40, 20 0" />

The points attribute assigns a list of points, each point separated by a comma.

points属性会分配一个点列表，每个点之间用逗号分隔。

多边形 (Polygon)

The polygon element is also a series of connected straight lines, but in this case, the last line will automatically reconnect to the initial point.

polygon元素也是一系列连接的直线，但是在这种情况下，最后一条线将自动重新连接到初始点。

<polygon points="0 100, 50 70, 60 40, 20 0" />

This example will draw the same shape as the polyline above, but it will draw an extra line to “close” the series of lines.

本示例将绘制与上面的polyline相同的形状，但是将绘制一条额外的线以“闭合”一系列直线。

更多信息 (More Information)

MDN Documentation: MDN

MDN文档： MDN

翻译自: https://www.freecodecamp.org/news/svg-rectangle-and-other-svg-shapes/

svg矩形参数