## HTML5 (8) -- detailed explanation of SVG path

Front end person 2021-08-09 16:16:09
html5 html detailed explanation svg

path yes SVG The most powerful of the basic shapes , Not only can we realize our last article 《HTML5( 7、 ... and )——SVG Basic introduction 》 in , To introduce the SVG Predefined line、rect、circle、ellipse、line、polyline、polygon Six basic shapes . You can also achieve more complex effects , We began to learn path How to apply .

# One 、path Detailed explanation of route

1.1、path command

path Used to define a path , The command controls this path , The following commands are available for path data ： notes ： All the above commands can be in case , The difference is that uppercase commands represent absolute positioning , Lowercase means relative positioning .

1.2、path Use

Use the syntax ：<path d=" M x1 y1 L x2 y2 H x3.... " stroke="red"></path>

d： Outgoing path ,d The values in are composed of multiple commands .

Arc is widely used in practical scenes ,A There are many parameters in the command ,large-arc and sweep It's hard to understand , Introduce in detail .

Use the syntax ：<path d="M x y A rx ry x-axis-rotation large-arc sweep x y"></path> As shown in the figure above ,A To B Two points plus radius , You can draw 4 It's an arc , Which one to choose ？ Is the large-arc ( Is it a big arc ) and sweep( Do you want to rotate it anticlockwise ) Two parameters determine .

large-arc = 1 Indicates that the radian is greater than or equal to 180, On the contrary, it is less than 180.

sweep = 0 It means to rotate counter clockwise , Rotate clockwise anyway .

So the above 4 The two parameters corresponding to each arc are ：

• 1：(0 0)
• 2：(0,1)
• 3：(1,1)
• 4：(1,0)

eg： Use path Draw a line 、 Semicircle 、 A straight line , Connected to form an arch bridge , The code is as follows ：

``<svg version="1.1" height="400" width="550"> <path d=" M 0 100 //（0,100） Starting point L 100 100 //  Draw a line directly to (100,100) A 100 100 0 1 1 300 100 //  Draw an arc L 400 100 // Draw a straight line to (400,100) " stroke="black" stroke-width="1" fill="none"></path> </svg>``

The operation results are as follows ： You can modify the above A in Parameter observe the change of semicircle .

1.3、js operation path

We use it a lot js Dynamic addition 、 Remove elements, etc , Can achieve more cool special effects , that js Can operate dynamically path Do you ？ How to operate ？

We use js Dynamically draw a case with the above eg1 Same path.

```<svg version="1.1" height="400" width="550" id="svg"></svg>
<script >
let svg = document.getElementById("svg")
let path = document.createElement("path")
path.setAttribute('d',"M 0 100 L 100 100 A 100 100 0 1 1 300 100 L 400 100")
svg.appendChild(path)
}
</script>```

Run code , We found no errors , And it didn't show any results .

explain html hold path As ordinary html The tag resolves , I found that I didn't recognize the label , So the page has no effect , At this point, we need to introduce a new method of creating elements .

createElementNS Introduce

createElementNS Is to create a namespace with a specified name URI And elements that qualify names .

Use the syntax ：document.createElementNS(namespaceURI, qualifiedName[, options]);

• namespaceURI  Specifies the namespace associated with the element URI String . Of the created element namespaceURI (en-US) Attributes use namespaceURI Initialize with the value of .
• qualifiedName A string that specifies the type of element to create . Of the created element nodeName (en-US) Attributes use qualifiedName Initialize with the value of .
• options An optional that contains a single attribute ElementCreationOptions object , Its value is pre used customElements.define() The label name of the defined custom element . For backward compatibility with earlier versions of the custom element specification , Some browsers allow you to use strings instead of objects here , Where the value of the string is the label name of the custom element .

Generate path Element code ：

```let path = document.createElementNS(
"http://www.w3.org/2000/svg",
"path"
)```

js When manipulating properties ,html Elements and SVG Element difference ：

Ordinary html Elements can be used in two ways ：

1. setAttribute(x,val) / getAttribute(x)
2. obj.x

SVG There is only one way to operate

1. setAttribute(x,val) / getAttribute(x)

eg3： Pie charts are particularly common in charts , Let's start with js Dynamically draw a sector arc .

```<svg version="1.1" height="400" width="550" id="svg"></svg>
<script >
function d2a(n){
return Math.PI*n/180
}
function pie(ang1,ang2,r,cx,cy){
let svg = document.getElementById("svg")
let path = document.createElementNS("http://www.w3.org/2000/svg","path")
let arr = []
let x1 = cx + Math.sin(d2a(ang1))*r
let y1 = cy - Math.cos(d2a(ang1))*r
let x2 = cx + Math.sin(d2a(ang2))*r
let y2 = cy - Math.cos(d2a(ang2))*r
arr.push(`M \${cx} \${cy} L \${x1} \${y1} A \${r} \${r} 0 0 1 \${x2} \${y2} `)
arr.push("Z")
path.setAttribute('d',arr.join(' '))
svg.appendChild(path)
}
pie(20,180,200,200,200)
}
</script>```

The results are shown in the figure ： If you are interested , You can modify the start angle and end angle by yourself , You can draw arcs with many different effects .

# Two 、 Style and priority

The above code

```<path d="
M 0 100 //（0,100） Starting point
L 100 100 // Draw a line directly to (100,100)
" stroke="black" stroke-width="1" fill="none"></path>```

The above attributes can be divided into two categories ：

• Can only be attribute - That determines the shape of a graph or path
• You can put styles - Visual effects

Such as troke、fill And so on is to control the visual effect , Such attributes can be placed in style In the style . So the above code can be rewritten as ：

```<path d="
M 0 100 //（0,100） Starting point
L 100 100 // Draw a line directly to (100,100)
" style="stroke:black;stroke-width:1;fill:none"></path>```

This style can be put into head Of style in , The code is ：

```path{
fill:none;
stroke:black;
stroke-width:1
}```

You can also use class、id、 Add styles to labels, etc , Their priorities are ：

attribute < * < label < class < id < Between lines

path The same style controls apply to SVG Predefined rect、circle、ellipse Equal elements .