[Translate SVG tutorial] The most magical element of the path element SVG!

Look at an example first

<svg xmlns= "Http://www.w3.org/2000/svg"    xmlns:xlink= "Http://www.w3.org/1999/xlink" >    <path d= " m50,50             a30,30 0 0,1 35,20             l100,100             m110,110             l100,0 "          style=" Stroke: #660000; fill:none; " />    </svg>

Look at two straight lines and a curve. But there's only one path in the code, isn't it amazing!

In the path element, all the commands related to drawing are in the D attribute

In the instance,  M represents the command to move the brush

         A represents the command to draw a circle with a brush

         L indicates the command to draw a straight line with a brush

Set and move brushes

At the time of drawing, the first command is always M move command, you want to draw any graphics, first you want to move the brush to a place, the M command is the command to move

For example, this example

<svg xmlns= "Http://www.w3.org/2000/svg"    xmlns:xlink= "Http://www.w3.org/1999/xlink" >    <path d= " m50,50 "          style=" Stroke: #660000; fill:none; " /></svg>

This example moves the brush to 50,50, and the next draw will begin.

Draw a line

My IQ will only draw straight lines, so first look at how to draw a straight line

Drawing straight lines is also the simplest command in path, with L or L to draw straight lines.

For example

<svg xmlns= "Http://www.w3.org/2000/svg"    xmlns:xlink= "Http://www.w3.org/1999/xlink" >    <path d= " m50,50             l100,100 "          style=" Stroke: #660000; fill:none; " /></svg>

This example starts from 50 50 and draws line 100,100 to the end, as follows

What's the difference between a large l and a lowercase l?

L is absolute positioning

L is relative positioning

You need to move the brush in the drawing

The drawing is always drawn from the point at which it was last completed, linked to the new point, each drawing command executes a drawing command, gets an end point, the brush is drawn to the last point, and the next draw starts at that point.

Draw an arc

Using the path element to draw a circle, use command A or a, and draw a line like, a means that absolute coordinates a represents relative coordinates

For example

<svg xmlns= "Http://www.w3.org/2000/svg"    xmlns:xlink= "Http://www.w3.org/1999/xlink" >    <path d= " m50,50             a30,50 0 0,1 100,100 "          style=" Stroke: #660000; fill:none; " /></svg>

The results are as follows

This example draws a curve from point 50,50 to 100,100 (part of a circle)

a30,50 0 0,1 100,100 explanation of the meaning of the several parameters

First parameter: rx radius in x direction (radius in x-direction)

Second parameter: ry radius in the y direction (radius in y-direction)

If the two parameters are the same, the arc if not equal is an elliptical arc.

A third parameter:x-axis-rotation   个人理解是内弧线还是外弧线，内弧线面积值为0 外弧线值为1

第四个参数：large-arc-flag determines whether to draw the smaller or bigger arc satisfying the start point

第五个参数sweep-flag  个人理解 相对平滑的弧线开关 就是一个圆分两半 选择弧线平滑的方向

代码如下

<path d= "m40,20  a30,30 0 0,0 70,70"    style= "Stroke: #cccc00; stroke-width:2; fill:none;" /> Yellow <path d= "m40,20  a30,30 0 1,0 70,70"    style= "Stroke: #ff0000; stroke-width:2; fill:none;" /> Red <path d= "m40,20  a30,30 0" 70,70 "    stroke: #00ff00; style=; stroke-width:2;" />

Green <path d= "m40,20  a30,30 0 0,1 70,70"    style= "Stroke: #0000ff; stroke-width:2; fill:none;" />

Blue

The effect is as follows

Too complicated to faint ....

There are more complicated, I see dizzy ...

Http://tutorials.jenkov.com/svg/path-element.html

[Translate SVG tutorial] The most magical element of the path element SVG!