background

Recently, WHEN I used G6 to draw some customized edges and lines in the brain map, I found that some knowledge of SVG Path was still a little awkward, so I made a self-knowledge summary.

SVG is introduced

SVG is an [XML] language, similar to XHTML, that can be used to draw vector graphics, such as the one shown below. SVG can create a graph by defining the necessary lines and shapes, modify an existing bitmap, or create a graph by combining the two. Graphics and their components can be transformed, composited, or completely changed with filters.

You can also use the

tag to create giFs, as shown in loading

<svg version="1.1" id="L9" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0"
  xml:space="preserve">
  <path fill="#fff"
    d="M73, 50 c0-12.7-10.3-23-23-23 s27, 37.3, 27, 50 M30.9, 50 c0-10.5, 8.5-19.1, 19.1 19.1 S69.1, 39.5, 69.1, 50." ">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 fifty"
      to="360 50 fifty" repeatCount="indefinite" />
  </path>
</svg>
Copy the code

Introduction to basic Elements

SVG provides elements for defining circles, rectangles, and simple or complex curves; A simple SVG document consists of a < SVG > root element and a basic shape element. There is also a G element, which organizes several basic shapes into a group.

From there, SVG can become more complex. SVG can also support gradients, rotations, animations, filter effects, interaction with JavaScript, and more, but all of these additional language features need to be implemented within a defined graphics area.

Browser compatibility

All modern browsers support SVG, and Can I Use has a fairly detailed list of browsers that support SVG, as shown below.

Path

This section focuses on the Path of SVG

Path is probably the most common shape in SVG, and you can use the path element to draw rectangles (rectangular or rounded), polylines, circles, ellipses, polygons, and other complex shapes such as Bezier curves, cubic curves, and so on. Path is powerful and complex, and requires very few points to create smooth lines (like curves). Polyline elements can achieve a similar effect, but you have to set up a large number of points (the denser the points, the more contiguous they are, the smoother they look), and you can’t magnify them (when you zoom in, the points become more discrete).

The label

The tag defines the path.

The following commands can be used for path data:

  • 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

Ps: All the preceding commands allow lowercase letters. Upper case indicates absolute location, lower case indicates relative location.

Draw basic graphics

The first is the “Move to” command, M, which, as mentioned earlier, takes two arguments, the X-axis and Y-axis coordinates of the point to Move to. Suppose that your brush is currently at a point, and after using the M command to move the brush, only the brush will be moved, but no line will be drawn between the two points. Because the M command just moves the brush, but doesn’t draw a line. So the M command often appears at the beginning of a path to indicate where to start drawing.

M x y
Copy the code

or

m dx dy
Copy the code

The “Line to” command, L, which takes two arguments, the x and y coordinates of a point, will draw a Line segment between the current position and the new position (the point before L where the brush is).

 L x y (or l dx dy)
Copy the code

There are also two shorthand commands for drawing horizontal and vertical lines. H, draw a horizontal line. V, draw a vertical line. Both commands take a single parameter indicating the position to which they are moving in either the x or y axes, because they move in only one direction of the coordinate axes.

Draw a simple rectangle:

<? xml version="1.0" standalone="no"? ><svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 L 10 10" />

  <circle cx="10" cy="10" r="5" fill="blue" />
  <circle cx="90" cy="90" r="5" fill="blue" />
  <circle cx="90" cy="10" r="5" fill="blue" />
  <circle cx="10" cy="90" r="5" fill="blue" />
</svg>

Copy the code

Draw the curve

There are three commands for drawing smooth curves, two for drawing Bezier curves and one for drawing arcs or parts of circles. There are many types of Bezier curves, but in the path element, there are only two: cubic Bezier curves C, and quadratic Bezier curves Q.

Bezier curve, also known as Bezier curve or Bezier curve, is a mathematical curve used in two-dimensional graphics applications. General vector graphics software uses it to accurately draw a curve. A Bates curve consists of line segments and nodes, which are draggable fulcrum points, and line segments that are like stretchable rubber bands. The pen tool we see on the drawing tool is used to do this vector curve.

The cubic Bezier curve C

The curve needs to define one point and two control points, so using the C command to create a cubic Bezier curve, three sets of coordinate parameters need to be set:

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

The last coordinate here (x,y) represents the end of the curve, the other two coordinates are the control points, (x1,y1) is the control point of the starting point, and (x2,y2) is the control point of the end point.

You can concatenate several Bezier curves to create a long, smooth curve. Normally, the control points on one side of a point are the symmetry of the control points on the other side (to keep the slope constant). In this way, you can use a shorthand bezier curve command S, as follows:

 S x2 y2, x y (or s dx2 dy2, dx dy)
Copy the code

The S command can be used to create the same Bezier curve as before, but if the S command follows a C or S command, its first control point is assumed to be the central symmetry point of the second control point of the previous command curve. If the S command is used alone, with no C or S command preceding it, the current point is used as the first control point. The following is an example of the syntax of the S command. In the figure, the control points marked red on the left are marked blue.

<? xml version="1.0" standalone="no"? ><svg width="190px" height="160px" version="1.1" 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>
Copy the code

Examples of applications similar to brain map relational lines (connections) :

IO /thebabydino…

The quadratic Bezier curve Q is simpler than the cubic Bezier curve, requiring only one control point to determine the slope of the curve at the beginning and end. So it requires two sets of parameters, control points and endpoint coordinates.

 Q x1 y1, x y (or q dx1 dy1, dx dy)
Copy the code

A code example is as follows:

<svg viewBox='- 10 0, 220, 200' width='200' height='200' style='border: 1px solid blue'>
  <path d='M0 100, Q100 0 200 100 ' stroke='red' fill='transparent' />
</svg>
Copy the code

Like the cubic Bezier curve which has an S command, the quadratic Bezier curve which has a similar T command can be extended with shorter parameters.

 T x y (or t dx dy)
Copy the code

arc

The arc command A is another command to create an SVG curve. Basically, an arc can be considered part of a circle or an oval. Suppose, given the radius of the major axis and the radius of the minor axis of the ellipse, and given two points (on the ellipse), two ellipses can be drawn based on the radius and two points, and two arcs can be drawn on each ellipse based on two points. So, you can draw four arcs just based on the radius and two points. To ensure that the arc created is unique, the A command needs to use more parameters:

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
Copy the code

G6 custom edge correlation

IO /zh/docs/man…

Shape.registerEdge(
'quadratic',
  {
    curvePosition: 0.5.// The default position for bending
    curveOffset: -20.// Bending degree: the distance from the line along the vertical vector (clockwise) of startPoint and endPoint. The greater the distance, the more bending
    getControlPoints(cfg: EdgeConfig): IPoint[] {
      let { controlPoints } = cfg; / / specified controlPoints
      if(! controlPoints || ! controlPoints.length) {const { startPoint, endPoint } = cfg;
        if (cfg.curveOffset === undefined) cfg.curveOffset = this.curveOffset;
        if (cfg.curvePosition === undefined) cfg.curvePosition = this.curvePosition;
        if (isArray(this.curveOffset)) cfg.curveOffset = cfg.curveOffset[0];
        if (isArray(this.curvePosition)) cfg.curvePosition = cfg.curveOffset[0];
        const innerPoint = getControlPoint(
          startPoint as Point,
          endPoint as Point,
          cfg.curvePosition as number,
          cfg.curveOffset as number,
        );
        controlPoints = [innerPoint];
      }
      return controlPoints;
    },
    getPath(points: Point[]): Array<Array<string | number>> {
      const path = [];
      path.push(['M', points[0].x, points[0].y]);
      path.push(['Q', points[1].x, points[1].y, points[2].x, points[2].y]);
      returnpath; }},'single-edge',);Copy the code

You can see the use of M and quadratic Bezier curves Q; We can extend the edges we need as we did in the source code above. This is combined with graph.updateItem() to dynamically change the edge of the node.

If there is anything to add…