Path is one of the most powerful basic SVG shapes, and not only does it implement what we described in our last article HTML5(7) : Basic SVG, This section introduces the six basic shapes of LINE, Rect, circle, ellipse, line, polyline, and polygon predefined in SVG. More complex effects can be achieved, so let’s learn how path can be applied.

1, path detailed explanation

1.1. Path command

Path is used to define a path, and commands are used to control the path. The following commands are available for path data:

Note: All the above commands are case-sensitive. The difference is that uppercase commands indicate absolute positioning and lowercase commands indicate relative positioning.

1.2. Use path

Use grammar:

D: leads to the path. The value in d is a combination of multiple commands.

Circular arc is widely used in practical scenarios. There are many parameters in command A, and large-arc and Sweep are difficult to understand.

Use grammar:

As shown in the figure above, four arcs can be drawn from the two points A to B plus the radius. Which one should be chosen? This is determined by the parameters of large-arc and sweep.

Large-arc = 1 indicates that the radian is greater than or equal to 180; otherwise, it is less than 180.

Sweep = 0 indicates counterclockwise rotation, but clockwise rotation.

Therefore, the above four arcs respectively correspond to two parameters:

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

Use path to draw a line, semicircle, and line, and connect them to form an arch bridge.

<path d=" M 0 100 // (0, 0, 0) <path d=" M 0 100 // (0, 0) (100,100) A 100 100 0 1 1 300 100 "stroke="black" stroke-width="1" fill="none"></path> </svg>Copy the code

The running results are as follows:

You can modify the above parameters in A to observe the change of the semicircle.

1.3, js operation path

We often use JS to dynamically add and remove elements, etc., to achieve more cool effects, but can JS dynamically manipulate path? How do you do that?

We use JS to dynamically draw the same path as in eg1.

< span style =" box-sizing: border-box; color: RGB (50, 50, 50); font-size: 14px! Important; white-space: normal; 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>Copy the code

Running the code, we find no errors and no results.

Add alert(path) and print [Object HTMLUnknownElement].

HTML parses path as a normal HTML tag, and finds that it does not recognize the tag, so the page has no effect. At this point, we need to introduce a new method for creating elements.

CreateElementNS introduction

CreateElementNS creates an element with the specified namespace URI and qualified name.

Use syntax: document.createelementns (namespaceURI, qualifiedName[, options]);

  • NamespaceURI **** a string that specifies the namespaceURI associated with the element. The namespace EURi (en-us) attribute of the created element is initialized with the value of namespaceURI.
  • QualifiedName A string that specifies the type of the element to be created. The nodeName (en-us) attribute of the created element is initialized with the value of qualifiedName.
  • Options Optional An optional ElementCreationOptions object containing a single attribute whose value is the label name of the custom element predefined with customElements.define(). For backward compatibility with earlier versions of the custom element specification, some browsers allow you to replace the object here with a string, where the value of the string is the tag name of the custom element.

Generate the path element code:

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

When javascript operates on attributes, HTML elements differ from SVG elements:

Normal HTML elements can be used in one of two ways:

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

There is only one way to do SVG

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

Eg3: The pie chart in the chart is particularly common, we will use JS to draw a fan arc dynamically first.

< span style =" box-sizing: border-box! Important; word-wrap: break-word! Important; "style =" box-sizing: border-box! Important;" style =" box-sizing: border-box! Important; 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(' ')) AppendChild (path)} window.onload = function(){pie(20,180,200,200)} </script>Copy the code

The running result is shown in the figure:

If you are interested, you can change the start Angle and end Angle yourself, and you can draw a variety of different effects of the arc.

Two, style and priority

The above code

<p style =" padding-bottom: 0px; padding-bottom: 0px; padding-bottom: 0px; padding-bottom: 0px; padding-bottom: 0px; padding-bottom: 0px; padding-bottom: 0px;Copy the code

The above attributes can be divided into two categories:

  • Only for properties – that determine the shape of a graph or path
  • You can put styles – visual effects

Properties such as troke, fill, and so on control visual effects, and such properties can be put into style styles. So the above code can be rewritten as:

<p style=" margin-bottom: 0pt; margin-bottom: 0pt; margin-bottom: 0pt; stroke-width:1; fill:none"></path>Copy the code

This style can be placed in the head style as follows:

path{
 fill:none;
 stroke:black;
 stroke-width:1
}
Copy the code

You can also add styles by class, ID, tag, etc. Their priority is:

Attribute < * < tag < class < id < between lines

The style controls for PATH also apply to SVG’s predefined rect, circle, ellipse, and other elements.

If feel good!

Click on the next part to decrypt SVG animation!