diff --git a/files/zh-cn/web/svg/tutorials/svg_from_scratch/basic_shapes/index.md b/files/zh-cn/web/svg/tutorials/svg_from_scratch/basic_shapes/index.md index c5462c136f489a..359fd0e53f9959 100644 --- a/files/zh-cn/web/svg/tutorials/svg_from_scratch/basic_shapes/index.md +++ b/files/zh-cn/web/svg/tutorials/svg_from_scratch/basic_shapes/index.md @@ -1,17 +1,19 @@ --- title: 基本形状 slug: Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes +l10n: + sourceCommit: c2fd97474834e061404b992c8397d4ccc4439a71 --- {{ PreviousNext("Web/SVG/Tutorials/SVG_from_scratch/Positions", "Web/SVG/Tutorials/SVG_from_scratch/Paths") }} -这里介绍的几个基本的形状用于大多数的 SVG 绘图。通过这些形状的命名可以知道其用途。给它们一些属性可以确定它们的位置和大小，但一个元素参考可能包含对元素属性的更准确和完整的描述，这里先不做介绍。然而，由于有些元素可以用在大多数 SVG 文档中，所以很有必要在这里介绍这部分元素。 +大多数 SVG 绘图都使用几种基本形状。这些形状的用途从其名称中便不言自明。本文将介绍决定其位置和尺寸的部分参数，但元素参考文档可能包含更精确完整的描述以及本文未涉及的其他属性。鉴于它们在多数 SVG 文档中被广泛使用，有必要对其进行简要介绍。 -## 基本形状 +要插入形状，需在文档中创建元素。不同元素对应不同形状，并通过不同参数描述形状的大小和位置。其中部分元素存在轻微冗余——它们可由其他形状派生创建，但所有元素的存在都是为了方便开发者，并使 SVG 文档尽可能简洁易读。所有基本形状如图所示。 -要想插入一个形状，你可以在文档中创建一个元素。不同的元素对应着不同的形状，并且使用不同的属性来定义图形的大小和位置。有一些形状因为可以由其他的形状创建而略显冗余，但是它们用起来方便，可让我们的 SVG 文档简洁易懂。右边的图片展示了所有的基本形状。生成它们的代码如下： +![八种不同形状与图案的连续排列。左上角为黑色轮廓方形，其后接黑色圆角方形。左下方为红色轮廓圆形，其后接红色轮廓椭圆形。左下侧为黄色直线，其后接黄色锯齿线。黄色直线下方为绿色轮廓星形，图像末端为蓝色波浪线。](shapes.png) -![](shapes.png) +用于生成图片的代码类似如下： ```xml @@ -35,110 +37,115 @@ slug: Web/SVG/Tutorials/SVG_from_scratch/Basic_shapes ``` > [!NOTE] -> `stroke`、`stroke-width` 和 `fill` 等属性在后面的章节中解释。 +> `stroke`、`stroke-width` 和 `fill` 等属性在后面的教程中解释。 -### 矩形 +## 矩形 -就像你能联想到的，`rect`元素会在屏幕上绘制一个矩形。其实只要 6 个基本属性就可以控制它在屏幕上的位置和形状。上面的图例中最先展示了 2 个矩形，虽然这有点冗余了。右边的那个图形设置了 rx 和 ry 属性用来控制圆角。如果没有设置圆角，则默认为 0。 +{{SVGElement("rect")}} 元素在屏幕上绘制一个矩形。控制屏幕上矩形位置和形状的基本属性共有六项。右侧的矩形设置了 `rx` 和 `ry` 参数，使其呈现圆角效果。若未设置，则默认值为 `0`。 ```xml ``` -- x - - : 矩形左上角的 x 位置 -- y - - : 矩形左上角的 y 位置 -- width - - : 矩形的宽度 -- height - - : 矩形的高度 -- rx - - : 圆角的 x 方位的半径 -- ry - - : 圆角的 y 方位的半径 +- `x` + - : 矩形左上角的 x 坐标。 +- `y` + - : 矩形左上角的 y 坐标。 +- `width` + - : 矩形的宽度。 +- `height` + - : 矩形的高度。 +- `rx` + - : 矩形圆角的 x 半径。 +- `ry` + - : 矩形圆角的 y 半径。 -### 圆形 +## 圆形 -正如你猜到的，`circle`元素会在屏幕上绘制一个圆形。它只有 3 个属性用来设置圆形。 +{{SVGElement("circle")}} 元素在屏幕上绘制一个圆形。确定该元素的形状和尺寸需要三个基本参数。 ```xml ``` -- r - - : 圆的半径 -- cx - - : 圆心的 x 位置 -- cy - - : 圆心的 y 位置 +- `r` + - : 圆的半径。 +- `cx` + - : 圆心的 x 坐标。 +- `cy` + - : 圆心的 y 坐标。 -### 椭圆 +## 椭圆 -[Ellipse](/zh-CN/docs/Web/SVG/Reference/Element/ellipse) 是`circle`元素更通用的形式，你可以分别缩放圆的 x 半径和 y 半径（通常数学家称之为长轴半径和短轴半径）。 +{{SVGElement("ellipse")}} 是 {{SVGElement("circle")}} 元素更通用的形式，你可以分别调整圆的 x 半径和 y 半径（通常数学家称之为*半长*轴和*半短*轴）。 ```xml ``` -- rx - - : 椭圆的 x 半径 -- ry - - : 椭圆的 y 半径 -- cx - - : 椭圆中心的 x 位置 -- cy - - : 椭圆中心的 y 位置 +- `rx` + - : 椭圆的 x 半径。 +- `ry` + - : 椭圆的 y 半径。 +- `cx` + - : 椭圆中心的 x 坐标。 +- `cy` + - : 椭圆中心的 y 坐标。 -### 线条 +## 线条 -[Line](/zh-CN/docs/Web/SVG/Reference/Element/line) 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。 +{{SVGElement("line")}} 元素以两个点的坐标为参数，并在两点之间之间绘制一条直线。 ```xml ``` -- x1 - - : 起点的 x 位置 -- y1 - - : 起点的 y 位置 -- x2 - - : 终点的 x 位置 -- y2 - - : 终点的 y 位置 +- `x1` + - : 第一个点的 x 坐标。 +- `y1` + - : 第一个点的 y 坐标。 +- `x2` + - : 第二个点的 x 坐标。 +- `y2` + - : 第二个点的 y 坐标。 -### 折线 +## 折线 -[Polyline](/zh-CN/docs/Web/SVG/Reference/Element/polyline)是一组连接在一起的直线。因为它可以有很多的点，折线的所有点位置都放在一个 points 属性中： +{{SVGElement("polyline")}} 是一组连接在一起的直线。由于点列表可能相当长，所有点都被包含在一个属性中： ```xml ``` -- points - - : 点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。 +- `points` + - : 点列表。每个数字必须用空格、逗号、换行符或回车符分隔，允许额外添加空白字符。每个点必须包含两个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 `(0,0)`、`(1,1)` 和 `(2,2)` 可以写成 `0, 0 1, 1 2, 2`。 -### 多边形 +## 多边形 -[`polygon`](/zh-CN/docs/Web/SVG/Reference/Element/polygon)和折线很像，它们都是由连接一组点集的直线构成。不同的是，`polygon`的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。 +{{SVGElement("polygon")}} 和 {{SVGElement("polyline")}} 很像，它们都是由连接一组点集的直线构成。不同的是，`polygon` 的路径在最后一个点处自动回到第一个点，组成一个闭合图形。 + +> [!NOTE] +> 矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个无圆角的 `` 元素。 ```xml ``` -- points - - : 点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置 (2,2) 连接到位置 (0,0)。 +- `points` + - : 点列表。每个数字必须用空格、逗号或换行符分隔，允许额外添加空白字符。每个点必须包含两个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 `(0,0)`、`(1,1)` 和 `(2,2)` 可以写成 `0, 0 1, 1 2, 2`。路径绘制完后闭合图形，所以最终的直线将从 `(2,2)` 连接到 `(0,0)`。 + +## 路径 -### 路径 +{{SVGElement("path")}} 可能是 SVG 中最常见的形状。你可以用 `path` 元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、二次曲线等曲线。 -`path`可能是 SVG 中最常见的形状。你可以用 path 元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2 次曲线等曲线。因为 path 很强大也很复杂，所以会在[下一章](/zh-CN/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths)进行详细介绍。这里只介绍一个定义路径形状的属性。 +因此，本教程的[下一节](/zh-CN/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths)将重点介绍路径。但目前请注意，控制其形状仅需一个参数。 ```xml ``` -- d - - : 一个点集数列以及其他关于如何绘制路径的信息。请阅读[路径](/zh-CN/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths)章节以了解更多信息。 +- `d` + - : 路径绘制所需的点列表及其他相关信息。更多详情请参阅[路径](/zh-CN/docs/Web/SVG/Tutorials/SVG_from_scratch/Paths)章节。 {{ PreviousNext("Web/SVG/Tutorials/SVG_from_scratch/Positions", "Web/SVG/Tutorials/SVG_from_scratch/Paths") }}