SVG basics | draw SVG connection tag MARKERS-

The SVG connection tag (markers) is used to mark the start and middle end positions of a line or path. You can use a circle or square at the beginning of the path, and a triangular arrow at the end of the path ....,.

SVG straight line

The SVG connection tag (markers) is used to mark the start and middle end positions of a line or path. You can use a circle or square at the beginning of the path and a triangular arrow at the end of the path. A simple example of envy:

First, we need to note that There are two elements Element. The two The element defines the display chart of the start and end positions of the connection mark.

Next, pay attention to the path How to Use the connection tag in the element. In the style, marker-start and marker-end are used to specify the start and end elements of the connection tag respectively.

Define a connection tag

We can use Element to define a connection tag. Example:

The preceding example defines a connection mark with a width of 8 and a height of 8. The width and height of the connection mark must be explicitly specified because it is a separate image element.

The id attribute is used in Element that references the connection tag.

The refX and refY attributes are used to specify which point in the connection tag is used as the reference point. The reference point is the coordinate of the start position of the current connection mark. In the preceding example, the coordinates are set at the center of the circle, that is, the center of the circle is placed at the starting position of the path. If you do not set the refX and refY attributes, they will be set to 0 by default, and the start of the path will be placed in the upper-left corner of the connection tag.

Mark in connection Is Element. The center of the circle is set to 5 or 5. This center is located at the center of the connection mark virtual box model. The width and height of the virtual box model correspond to the markerWidth and markerHeight attributes respectively.

Auto Orientation

Let's take a look at the following connection tag example. A triangle is used as the Arrow marker of the path.

In Element Element draws a triangle to the right of an arrow. If the path is not placed horizontally, We need to rotate the triangle to adapt it to the path direction. It is very troublesome to manually adjust each time. In this case, we can set the orient attribute to auto, so that the image will be automatically rotated to adapt to different paths.

The following are five straight lines with different angles. The two ends use the same markup image. Note how these images adapt to different straight lines.

You can also set the value of the orient attribute to a fixed value in the unit of degrees. For example, set it to 45. This will rotate the mark (marker) 45 degrees during use.

Reference tag on path

You can use the following CSS attribute to reference the tag on the path:

Marker-start

Marker-mid

Marker-end

The three CSS attributes are marked at the beginning, center, and end of the path.

To use these three CSS attributes, you must Used in the style of the element. To reference a tag, you only need to apply the ID in the corresponding CSS attribute, for example, the following example:

marker-start : url(#markerId);

MarkerId must be replaced with the one you want Element.

The following is an example of using these three CSS attributes:

The result returned by the code above is as follows:

This effect is achieved by setting The value of the markerUnits attribute of the element is strokeWidth. In fact, this is the default value of the markerUnits attribute. The Code is as follows:

If the size you do not want to mark automatically matches the stroke width of the path, you can set the value of markerUnits to userSpaceOnUse. In this way, the tag will keep their original size.

The above is the basis of SVG | draw the content of the SVG connection mark MARKERS. For more information, see PHP Chinese Network (www.php1.cn )!