Simultaneous release: https://blog.jijian.link/2020-04-14/svg-arc/
Due to limited functions, iframe embedding links cannot be placed here. To see the implementation effect, please go to https://blog.jijian.link/2020-04-14/svg-arc/
Parsing
The <path> tag should be regarded as the most powerful tag in SVG, and various graphics can be drawn with it.
This article uses the Bessel curve Q command of the path label to draw an arc.
usage
<path d="M30 90 Q115 139 200 90"></path>
Common commands for <path> tags:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
Note: All the above commands allow lower case letters. Upper case means absolute positioning, lower case means relative positioning.
Draw lines
Common effects: draw solid lines, draw dashed lines, draw arcs, draw gradient lines, draw arrow lines.
Source code:
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- 箭头 --> <marker id="arrow" markerUnits="strokeWidth" markerWidth="12" markerHeight="12" viewBox="0 0 12 12" refX="6" refY="6" orient="auto"> <path d="M2,2 L10,6 L2,10 L6,6 L2,2" style="fill: #000000;"/> </marker> <linearGradient id="line-gradient" x1="0" y1="0" x2="1" y2="0"> <stop offset="0" stop-color="#990000" stop-opacity="0" /> <stop offset="1" stop-color="#990000" stop-opacity="1" /> </linearGradient> </defs> <!-- 实线 --> <path class="line" d="M30 30 L200 30"></path> <!-- 虚线 --> <path class="line" d="M30 60 L200 60" style="stroke-dasharray: 5;"></path> <!-- 弧线 --> <path class="line" d="M30 90 Q115 139 200 90"></path> <!-- 渐变线条 --> <path class="line" d="M30 120 Q115 169 200 120" style="stroke: url(#line-gradient)"arrow line<!->path> </ -> < path class = "line" d = "M30 150 Q115 199 200 150" style = "marker-end: url (#arrow)" > </ path > <!- No browser polished lines, there are Sawtooth pixels- > < path class = "line" d = "M30 180 Q115 229 200 180" style = "shape-rendering: optimizeSpeed;" > </ path > </ svg >
Practical application
The actual application scenario does not necessarily have detailed coordinate points, which requires us to calculate according to the existing conditions.
For example: there are already start left and end coordinates, draw an arc based on these two coordinates.
SVG drawing arc:
<path d="M30 90 Q115 139 200 90"></path>
M30 90: indicates the start point x: 30 y: 90
Q115 139: indicates that the control point is at x: 115 y: 139
200 90: indicates the end point x: 200 y: 90
Graphical calculation of control points:
Converted to JS algorithm:
const pos = getPosition ({left: 30, top: 90}, {left: 200, top: 90}, 30 );
console.log (pos); // [{"x": 115, "y": 139 }, {"x": 115, "y": 41}]
function getPosition (dot1, dot2, angle) {
var x1 = dot1.left;
var y1 = dot1.top;
var x2 = dot2.left;
var y2 = dot2.top;
var PI = Math.PI;
// The radian angle of the x axis between two points
var xAngle = Math.atan2 ((y2-y1), (x2- x1));
//
Turn to angle xAngle = 360 * xAngle / (2 * PI); // Length between two points var
L = Math.sqrt ((y2-y1) * (y2-y1) + (x2-x1) * (x2- x1));
// Calculate the length of the hypotenuse of an isosceles triangle
var L2 = L / 2 / Math.cos (angle * 2 * PI / 360); // Find the coordinates of the first vertex, located on the lower side var val1 = {};
// Find the coordinates of the second vertex, located on the upper side var val2 = {};
val1 [ 'x'] = x1 + Math.round (L2 * Math.cos ((xAngle + angle) * 2 * PI / 360));
val1 ['y'] = y1 + Math.round (L2 * Math.sin ((xAngle + angle ) * 2 * PI / 360));
val2 ['x'] = x1 + Math.round (L2 * Math.cos ((xAngle-angle) * 2 * PI / 360));
val2 ['y'] = y1 + Math.round (L2 * Math.sin ((xAngle-angle) * 2 * PI / 360)); return [val1, val2];
}
Application scenario:
Summary: The use of path is much more than that, such as common font icons, SVG icons, etc., all can be seen using path tags, and some cool animation effects can also be achieved using path tags.