From 43a5cac2eff22c21071800e13bef12af9d3a37d0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 13:12:08 +0100 Subject: unslug zh-tw: move --- .../zh-tw/web/svg/tutorial/basic_shapes/index.html | 150 +++++++++++++ files/zh-tw/web/svg/tutorial/paths/index.html | 239 +++++++++++++++++++++ .../tutorial/\350\267\257\345\276\204/index.html" | 239 --------------------- .../web/svg/\346\225\231\345\255\270/index.html" | 13 -- 4 files changed, 389 insertions(+), 252 deletions(-) create mode 100644 files/zh-tw/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/zh-tw/web/svg/tutorial/paths/index.html delete mode 100644 "files/zh-tw/web/svg/tutorial/\350\267\257\345\276\204/index.html" delete mode 100644 "files/zh-tw/web/svg/\346\225\231\345\255\270/index.html" (limited to 'files/zh-tw/web/svg') diff --git a/files/zh-tw/web/svg/tutorial/basic_shapes/index.html b/files/zh-tw/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..579f39bbe9 --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,150 @@ +--- +title: 基本形状 +slug: SVG/Tutorial/Basic_Shapes +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +
+ {{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}
+

下面将介绍一些SVG绘图常用的形状命令，通过它们名字，你可以很轻易的看出它们可以画出什么。这里也会给出一些定义位置和尺寸的属性，但不会介绍如何将元素定义得更准确更完善。在这里我们只介绍必须的基本功能，因为它们会被广泛应用在SVG文件里。

+

基本形状

+

你需要在文档里创建一个元素，来新增相应的形状。不同的元素用来定义不同的形状，并采用不同的属性定义尺寸和位置。其中一些是可以被其他形状命令替代的，所以显得有点多余，但是它们的存在是有意义的，它们可以让你用起来更方便，并且保证你的SVG文档尽可能简洁易懂。所有的基本形状都在右边的图例里展示出来了，生成它们的代码如下：

+

+
+ 
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+
+
+注意： stroke, stroke-width 和 fill 等属性会在后面的章节里介绍。
+

矩形 rect

+

rect元素用来创建矩形，它有6个基本属性，用于设定它的位置以及样式。上面的图例里，最开始的两个图形都是矩形，右边的矩形设定了rx和ry属性，从而增加了圆角，如果不给它们赋值，其默认值为0，也就没有圆角。

+
<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+
+
+ x
+
+ 矩形左上角的x轴坐标
+
+ y
+
+ 矩形左上角的y轴坐标
+
+ width
+
+ 矩形的宽
+
+ height
+
+ 矩形的高
+
+ rx
+
+ 圆角的x轴半径
+
+ ry
+
+ 圆角的y轴半径
+
+

圆形 circle

+

circle 元素用来创建圆形，这里给出了3个属性：

+
<circle cx="25" cy="75" r="20"/>
+
+
+ r
+
+ 半径
+
+ cx
+
+ 圆心的x轴坐标
+
+ cy
+
+ 圆心的y轴坐标
+
+

椭圆 ellipse

+

椭圆ellipse其实就是一种特殊的圆形，这里可以改变x和y轴的半径来区分它们（数学上称为长轴半径和短轴半径）。

+
<ellipse cx="75" cy="75" rx="20" ry="5"/>
+
+
+ rx
+
+ x轴半径
+
+ ry
+
+ y轴半径
+
+ cx
+
+ 圆心的x轴坐标
+
+ cy
+
+ 圆心的y轴坐标
+
+

线 line

+

line画的是线段，通过在属性中定义起点和终点的坐标，构成两点之间的线段。

+
<line x1="10" x2="50" y1="110" y2="150"/>
+
+
+ x1
+
+ 第一个点的x轴坐标
+
+ y1
+
+ 第一个点的y轴坐标
+
+ x2
+
+ 第二个点的x轴坐标
+
+ y2
+
+ 第二个点的y轴坐标
+
+

折线 polyline

+

折线polyline是一组连接起来的线段，折线上所有的点都放在一个属性里:

+
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+
+
+ points属性
+
+points属性是点的列表，每个数字用空格、逗号、换行或回车分隔开。每个点包括两个数字，一个x轴坐标一个y轴坐标，所以，(0,0)、(1,1)、(2,2)这三个点的列表应该写成“0 0, 1 1, 2 2”。
+
+

多边形 polygon

+

多边形polygon和折线很像，它们都是定义一组点，然后将点用线段连接起来，从而形成一个图形。不同的是，多边形的起点和终点会连起来，形成一个闭合的形状。需要注意的是，矩形也是一种多边形，如果需要的话，你也可以用多边形来创建一个矩形。

+
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+
+
+ points属性
+
多边形的points属性也是点的列表，每个数字用空格、逗号、换行或回车分隔开。每个点包括两个数字，一个x轴坐标一个y轴坐标，所以，(0,0)、(1,1)、(2,2)这三个点的列表应该写成“0 0, 1 1, 2 2”。这些都和折线的points属性一样。不同的是，这里的最后一个点和第一个点会自动连接起来，形成闭合路径。
+
+

路径 path

+

路径path可能是SVG中最通用的一种形状，通过path元素，我们可以创建矩形（有没有圆角都行）、圆形、椭圆形、折线、多边形，以及其他一些形状，比如二次贝塞尔曲线、三次贝塞尔曲线，等等。因为path很强大也很复杂，所以会在下一章进行详细介绍。这里只介绍一个定义路径形状的属性。

+
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+
+
+ d属性
+
+ d属性的值是由一些点的坐标，以及控制这些坐标的命令组成的，它们一起描述了路径的形状。具体内容在path章节里介绍。
+
+
+ {{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}
diff --git a/files/zh-tw/web/svg/tutorial/paths/index.html b/files/zh-tw/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..e0a107f49a --- /dev/null +++ b/files/zh-tw/web/svg/tutorial/paths/index.html @@ -0,0 +1,239 @@ +--- +title: 路徑 +slug: Web/SVG/Tutorial/路径 +tags: + - SVG +translation_of: Web/SVG/Tutorial/Paths +--- +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+ +

<path> 元件可說是SVG程式庫中最強大的基本形狀了，你可以用它來產生線條、曲線、圓弧等形狀。

+ +

路徑(paths) 藉由結合多個直線或曲線來產生複雜形狀。路徑和折線雖然可以產生相似外觀的形狀，例如：可由折線組成由單純的直線組成的複雜形狀 。但折線需要產生許多小段的直線去模擬曲線的外觀，如果遇到需要放大的情形，會較難 scale。好好瞭解路徑對於繪製 SVG 是重要的。雖然不建議使用XML編輯器或文字編輯器建立複雜路徑，但了解它們的工作原理，將與助於發現和修復 SVG 的顯示問題。

+ +

path 元素，由一個屬性定義：{{ SVGAttr("d") }}（可參考基本形狀 ）。 "d" 屬性包含了一系列的指令(command)，以及這些指令各自使用的參數。

+ +

 

+ +

Each of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. For instance, let's move to the x and y coordinates (10, 10). The "Move to" command is called with the letter M. When the parser runs into this letter, it knows you want to move to a point. So, to move to (10,10) you would use the command "M 10 10". After that, the parser begins reading for the next command.

+ +

All of the commands also come in two variants. An uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates (e.g. move from the last point 10px up and 7px to the left).

+ +

Coordinates in the "d" attribute are always unitless and hence in the user coordinate system. Later, we will learn how paths can be transformed to suit other needs.

+ +

Line commands

+ +

There are five line commands for <path> nodes. The first command is the "Move To" or M, which was described above. It takes two parameters, a coordinate  ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The "Move To" command appears at the beginning of paths to specify where the drawing should start. e.g. :

+ +
M x y
+
+ +

or

+ +
m dx dy
+ +

In the following example we only have a point at (10,10). Note, though, that it wouldn't show up if you were just drawing the path normally. For example:

+ +

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10"/>
+
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+
+</svg>
+ +

There are three commands that draw lines. The most generic is the "Line To" command, called with L. L takes two parameters—x and y coordinates—and draws a line from the current position to a new position.

+ +
 L x y (or l dx dy)
+
+ +

There are two abbreviated forms for drawing horizontal and vertical lines. H draws a horizontal line, and V draws a vertical line. Both commands only take one argument since they only move in one direction.

+ +
 H x (or h dx)
+ V y (or v dy)
+
+ +

An easy place to start is by drawing a shape. We will start with a rectangle (the same type that could be more easily made with a <rect> element). It's composed of horizontal and vertical lines only:

+ +

+ +
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+
+</svg>
+ +

We can shorten the above path declaration a little bit by using the "Close Path" command, called with Z. This command draws a straight line from the current position back to the first point of the path. It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.

+ +
 Z (or z)
+
+ +

So our path above could be shortened to:

+ +
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+
+ +

You can also use the relative form of these commands to draw the same picture. Relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it relative to its last position. For instance, since our box is 80 x 80, the path element could have been written:

+ +
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+
+ +

The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.

+ +

In these examples, it would probably be simpler to use the <polygon> or <polyline> elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.

+ +

Curve commands

+ +

There are three different commands that you can use to create smooth curves. Two of those curves are Bezier curves, and the third is an "arc" or part of a circle. You might have already gained practical experience with Bezier curves using path tools in Inkscape, Illustrator or Photoshop. For a complete description of the math behind Bezier curves, go to a reference like the one on Wikipedia. There are an infinite number of Bezier curves, but only two simple ones are available in path elements: a cubic one, called with C, and a quadratic one, called with Q.

+ +

Bezier Curves

+ +

The cubic curve, C, is the slightly more complex curve. Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.

+ +
 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
+
+ +

The last set of coordinates here (x,y) are where you want the line to end. The other two are control points. (x1,y1) is the control point for the start of your curve, and (x2,y2) is the control point for the end. The control points essentially describe the slope of your line starting at each point. The Bezier function then creates a smooth curve that transfers you from the slope you established at the beginning of your line, to the slope at the other end.

+ +

Cubic Bézier Curves with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+
+</svg>
+
+ +

The example above creates nine Cubic Bezier curves. As the curves move toward the right, the control points become spread out horizontally. As the curves move downward, they become further separated from the end points. The thing to note here is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.

+ +

You can string together several Bezier curves to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, you can use a shortcut version of the cubic Bezier, designated by the command S (or s).

+ +
 S x2 y2, x y (or s dx2 dy2, dx dy)
+
+ +

S produces the same type of curve as earlier, but if it follows another S command or a C command, the first control point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then the current position of the cursor is used as the first control point. In this case the result is the same as what the Q command would have produced with the same parameters. An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.

+ +

ShortCut_Cubic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve. Note that the co-ordinate deltas for q are both relative to the previous point (that is, dx and dy are not relative to dx1 and dy1).

+ +
 Q x1 y1, x y (or q dx1 dy1, dx dy)
+
+ +

Quadratic Bézier with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.

+ +
 T x y (or t dx dy)
+
+ +

This shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points.

+ +
+

This only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.

+
+ +

Shortcut_Quadratic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Both curves produce similar results, although the cubic allows you greater freedom in exactly what your curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry your line has.

+ +

Arcs

+ +

The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:

+ +
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+
+ +

At its start, the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up ellipses to see how they behave. The final two arguments designate the x and y coordinates to end the stroke. Together, these four values define the basic structure of the arc.

+ +

The third parameter describes the rotation of the arc. This is best explained with an example:

+ +

SVGArcs_XAxisRotation_with_grid

+ +
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+</svg>
+ +

The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.

+ +

For the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. In a slightly modified example you can see the two ellipses that form the four different arcs:

+ +

Show the 4 arcs on the Ellipse example

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
+  <path d="M10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
+  <circle cx="110" cy="215" r="2" fill="red"/>
+  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
+  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
+</svg>
+
+ +

Notice that each of the blue ellipses are formed by two arcs, depending if you travel clockwise or counter-clockwise. Each ellipse has one short arc and one long arc. The two ellipses are just mirror images of each other. They are flipped along the line formed from the start->end points.

+ +

If the start->end points are farther than the ellipse's x and y radius can reach, the ellipse's radii will be minimally expanded so it could reach the start->end points. The interactive codepen at the bottom of this page demonstrates this well. To determine if your ellipse's radii is large enough to require expanding, you would need to solve a system of equations such as this on wolfram alpha. This computation is for the non-rotated ellipse with start->end (110, 215)->(150.71, 170.29). The solution, (x, y), is the center of the ellipse(s). The solution will be imaginary if your ellipse radii is too small. This second computation is for the non-rotated ellipse with start->end (110, 215)->(162.55, 162.45). The solution has a small imaginary component because the ellipse was just barely expanded.

+ +

The four different paths mentioned above are determined by the next two argument flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles you will travel around. The example below shows all four possible combinations, along with the two circles for each case.

+ +

+ +
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>
+ +

Arcs are an easy way to create pieces of circles or ellipses in your drawings. For instance, a pie chart would require a different arc for each piece.

+ +

If you're transitioning to SVG from Canvas, arcs can be the hardest thing to learn, but are also much more powerful. Complete circles and ellipses are actually the only shapes that SVG arcs have trouble drawing. Because the start and end points for any path going around a circle are the same point, there are an infinite number of circles that could be chosen, and the actual path is undefined. It's possible to approximate them by making the start and end points of your path slightly askew, and then connecting them with another path segment. For example, you can make a circle with an arc for each semicircle. At that point, it's often easier to use a real circle or ellipse node instead. This interactive demo might help you understand the concepts behind SVG arcs: http://codepen.io/lingtalfi/pen/yaLWJG (tested in chrome and firefox only, might not work in your browser)

+ +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git "a/files/zh-tw/web/svg/tutorial/\350\267\257\345\276\204/index.html" "b/files/zh-tw/web/svg/tutorial/\350\267\257\345\276\204/index.html" deleted file mode 100644 index e0a107f49a..0000000000 --- "a/files/zh-tw/web/svg/tutorial/\350\267\257\345\276\204/index.html" +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: 路徑 -slug: Web/SVG/Tutorial/路径 -tags: - - SVG -translation_of: Web/SVG/Tutorial/Paths ---- -

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

- -

<path> 元件可說是SVG程式庫中最強大的基本形狀了，你可以用它來產生線條、曲線、圓弧等形狀。

- -

路徑(paths) 藉由結合多個直線或曲線來產生複雜形狀。路徑和折線雖然可以產生相似外觀的形狀，例如：可由折線組成由單純的直線組成的複雜形狀 。但折線需要產生許多小段的直線去模擬曲線的外觀，如果遇到需要放大的情形，會較難 scale。好好瞭解路徑對於繪製 SVG 是重要的。雖然不建議使用XML編輯器或文字編輯器建立複雜路徑，但了解它們的工作原理，將與助於發現和修復 SVG 的顯示問題。

- -

path 元素，由一個屬性定義：{{ SVGAttr("d") }}（可參考基本形狀 ）。 "d" 屬性包含了一系列的指令(command)，以及這些指令各自使用的參數。

- -

 

- -

Each of the commands is instantiated (for example, creating a class, naming and locating it) by a specific letter. For instance, let's move to the x and y coordinates (10, 10). The "Move to" command is called with the letter M. When the parser runs into this letter, it knows you want to move to a point. So, to move to (10,10) you would use the command "M 10 10". After that, the parser begins reading for the next command.

- -

All of the commands also come in two variants. An uppercase letter specifies absolute coordinates on the page, and a lowercase letter specifies relative coordinates (e.g. move from the last point 10px up and 7px to the left).

- -

Coordinates in the "d" attribute are always unitless and hence in the user coordinate system. Later, we will learn how paths can be transformed to suit other needs.

- -

Line commands

- -

There are five line commands for <path> nodes. The first command is the "Move To" or M, which was described above. It takes two parameters, a coordinate  ' x ' and coordinate ' y ' to move to. If your cursor already was somewhere on the page, no line is drawn to connect the two places. The "Move To" command appears at the beginning of paths to specify where the drawing should start. e.g. :

- -
M x y
-
- -

or

- -
m dx dy
- -

In the following example we only have a point at (10,10). Note, though, that it wouldn't show up if you were just drawing the path normally. For example:

- -

- -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10"/>
-
-  <!-- Points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-
-</svg>
- -

There are three commands that draw lines. The most generic is the "Line To" command, called with L. L takes two parameters—x and y coordinates—and draws a line from the current position to a new position.

- -
 L x y (or l dx dy)
-
- -

There are two abbreviated forms for drawing horizontal and vertical lines. H draws a horizontal line, and V draws a vertical line. Both commands only take one argument since they only move in one direction.

- -
 H x (or h dx)
- V y (or v dy)
-
- -

An easy place to start is by drawing a shape. We will start with a rectangle (the same type that could be more easily made with a <rect> element). It's composed of horizontal and vertical lines only:

- -

- -
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
-
-  <!-- Points -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-  <circle cx="90" cy="90" r="2" fill="red"/>
-  <circle cx="90" cy="10" r="2" fill="red"/>
-  <circle cx="10" cy="90" r="2" fill="red"/>
-
-</svg>
- -

We can shorten the above path declaration a little bit by using the "Close Path" command, called with Z. This command draws a straight line from the current position back to the first point of the path. It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command.

- -
 Z (or z)
-
- -

So our path above could be shortened to:

- -
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-
- -

You can also use the relative form of these commands to draw the same picture. Relative commands are called by using lowercase letters, and rather than moving the cursor to an exact coordinate, they move it relative to its last position. For instance, since our box is 80 x 80, the path element could have been written:

- -
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-
- -

The path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.

- -

In these examples, it would probably be simpler to use the <polygon> or <polyline> elements. However, paths are used so often in drawing SVG that developers may be more comfortable using them instead. There is no real performance penalty or bonus for using one or the other.

- -

Curve commands

- -

There are three different commands that you can use to create smooth curves. Two of those curves are Bezier curves, and the third is an "arc" or part of a circle. You might have already gained practical experience with Bezier curves using path tools in Inkscape, Illustrator or Photoshop. For a complete description of the math behind Bezier curves, go to a reference like the one on Wikipedia. There are an infinite number of Bezier curves, but only two simple ones are available in path elements: a cubic one, called with C, and a quadratic one, called with Q.

- -

Bezier Curves

- -

The cubic curve, C, is the slightly more complex curve. Cubic Beziers take in two control points for each point. Therefore, to create a cubic Bezier, you need to specify three sets of coordinates.

- -
 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
-
- -

The last set of coordinates here (x,y) are where you want the line to end. The other two are control points. (x1,y1) is the control point for the start of your curve, and (x2,y2) is the control point for the end. The control points essentially describe the slope of your line starting at each point. The Bezier function then creates a smooth curve that transfers you from the slope you established at the beginning of your line, to the slope at the other end.

- -

Cubic Bézier Curves with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
-  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
-  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
-  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
-  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
-  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
-  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
-  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
-  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
-
-</svg>
-
- -

The example above creates nine Cubic Bezier curves. As the curves move toward the right, the control points become spread out horizontally. As the curves move downward, they become further separated from the end points. The thing to note here is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point.

- -

You can string together several Bezier curves to create extended, smooth shapes. Often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. In this case, you can use a shortcut version of the cubic Bezier, designated by the command S (or s).

- -
 S x2 y2, x y (or s dx2 dy2, dx dy)
-
- -

S produces the same type of curve as earlier, but if it follows another S command or a C command, the first control point is assumed to be a reflection of the one used previously. If the S command doesn't follow another S or C command, then the current position of the cursor is used as the first control point. In this case the result is the same as what the Q command would have produced with the same parameters. An example of this syntax is shown below, and in the figure to the left the specified control points are shown in red, and the inferred control point in blue.

- -

ShortCut_Cubic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

The other type of Bezier curve, the quadratic curve called with Q, is actually a simpler curve than the cubic one. It requires one control point which determines the slope of the curve at both the start point and the end point. It takes two arguments: the control point and the end point of the curve. Note that the co-ordinate deltas for q are both relative to the previous point (that is, dx and dy are not relative to dx1 and dy1).

- -
 Q x1 y1, x y (or q dx1 dy1, dx dy)
-
- -

Quadratic Bézier with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

As with the cubic Bezier curve, there is a shortcut for stringing together multiple quadratic Beziers, called with T.

- -
 T x y (or t dx dy)
-
- -

This shortcut looks at the previous control point you used and infers a new one from it. This means that after your first control point, you can make fairly complex shapes by specifying only end points.

- -
-

This only works if the previous command was a Q or a T command. If it is not, then the control point is assumed to be the same as the previous point, and you'll only draw lines.

-
- -

Shortcut_Quadratic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Both curves produce similar results, although the cubic allows you greater freedom in exactly what your curve looks like. Deciding which curve to use is situational and depends on the amount of symmetry your line has.

- -

Arcs

- -

The other type of curved line you can create using SVG is the arc, called with A. Arcs are sections of circles or ellipses. For a given x-radius and y-radius, there are two ellipses that can connect any two points (as long as they're within the radius of the circle). Along either of those circles there are two possible paths that you can take to connect the points, so in any situation there are four possible arcs available. Because of that, arcs have to take in quite a few arguments:

- -
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
-
- -

At its start, the arc element takes in two arguments for the x-radius and y-radius. If you need to, look up ellipses to see how they behave. The final two arguments designate the x and y coordinates to end the stroke. Together, these four values define the basic structure of the arc.

- -

The third parameter describes the rotation of the arc. This is best explained with an example:

- -

SVGArcs_XAxisRotation_with_grid

- -
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 315
-           L 110 215
-           A 30 50 0 0 1 162.55 162.45
-           L 172.55 152.45
-           A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-</svg>
- -

The example shows a path element that goes diagonally across the page. At its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). In the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. For the second arc, though, the x-axis-rotation is set to -45 degrees. This rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image.

- -

For the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. In a slightly modified example you can see the two ellipses that form the four different arcs:

- -

Show the 4 arcs on the Ellipse example

- -
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
-  <path d="M10 315
-           L 110 215
-           A 36 60 0 0 1 150.71 170.29
-           L 172.55 152.45
-           A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
-  <circle cx="110" cy="215" r="2" fill="red"/>
-  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
-  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
-</svg>
-
- -

Notice that each of the blue ellipses are formed by two arcs, depending if you travel clockwise or counter-clockwise. Each ellipse has one short arc and one long arc. The two ellipses are just mirror images of each other. They are flipped along the line formed from the start->end points.

- -

If the start->end points are farther than the ellipse's x and y radius can reach, the ellipse's radii will be minimally expanded so it could reach the start->end points. The interactive codepen at the bottom of this page demonstrates this well. To determine if your ellipse's radii is large enough to require expanding, you would need to solve a system of equations such as this on wolfram alpha. This computation is for the non-rotated ellipse with start->end (110, 215)->(150.71, 170.29). The solution, (x, y), is the center of the ellipse(s). The solution will be imaginary if your ellipse radii is too small. This second computation is for the non-rotated ellipse with start->end (110, 215)->(162.55, 162.45). The solution has a small imaginary component because the ellipse was just barely expanded.

- -

The four different paths mentioned above are determined by the next two argument flags. As mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. The first argument is the large-arc-flag. It simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. The second argument is the sweep-flag. It determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles you will travel around. The example below shows all four possible combinations, along with the two circles for each case.

- -

- -
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
-  <path d="M80 80
-           A 45 45, 0, 0, 0, 125 125
-           L 125 80 Z" fill="green"/>
-  <path d="M230 80
-           A 45 45, 0, 1, 0, 275 125
-           L 275 80 Z" fill="red"/>
-  <path d="M80 230
-           A 45 45, 0, 0, 1, 125 275
-           L 125 230 Z" fill="purple"/>
-  <path d="M230 230
-           A 45 45, 0, 1, 1, 275 275
-           L 275 230 Z" fill="blue"/>
-</svg>
- -

Arcs are an easy way to create pieces of circles or ellipses in your drawings. For instance, a pie chart would require a different arc for each piece.

- -

If you're transitioning to SVG from Canvas, arcs can be the hardest thing to learn, but are also much more powerful. Complete circles and ellipses are actually the only shapes that SVG arcs have trouble drawing. Because the start and end points for any path going around a circle are the same point, there are an infinite number of circles that could be chosen, and the actual path is undefined. It's possible to approximate them by making the start and end points of your path slightly askew, and then connecting them with another path segment. For example, you can make a circle with an arc for each semicircle. At that point, it's often easier to use a real circle or ellipse node instead. This interactive demo might help you understand the concepts behind SVG arcs: http://codepen.io/lingtalfi/pen/yaLWJG (tested in chrome and firefox only, might not work in your browser)

- -

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git "a/files/zh-tw/web/svg/\346\225\231\345\255\270/index.html" "b/files/zh-tw/web/svg/\346\225\231\345\255\270/index.html" deleted file mode 100644 index 5521386506..0000000000 --- "a/files/zh-tw/web/svg/\346\225\231\345\255\270/index.html" +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: 教學 -slug: Web/SVG/教學 ---- -

 

-


-本教學解說 SVG（Scalable Vector Graphics）的 1.1 版本，是一種 W3C XML 的衍伸語言，且已部分實裝於 Firefox 1.5、Opera 8.5 還有其他的瀏覽器。

-

本教學仍處於非常早期的階段。如果可能的話，請幫忙彙整並寫成一、兩個段落。為本教學增添內容！

-
簡介
- - -

{{ languages( { "en": "en/SVG/Tutorial", "fr": "fr/SVG/Tutoriel", "ja": "ja/SVG/Tutorial", "pl": "pl/SVG/Przewodnik" } ) }}

-- cgit v1.2.3-54-g00ecf