The use of elements in svg and the introduction of marker attributes

The graphics drawn using SVG are arrows, which can be defined in and and then reused, but you need to move or rotate them every time you apply them. It would be much more convenient to use a element directly.

Element

A marker is an element that can connect the vertices of one or more paths, lines, polylines, or polygons. Flag type. The most common use case is to draw arrows or mark a (polymarker) graphic on the line of the output result.
Use the element to create a marker and its related attributes. Usually we put the marker in the element and then reference it elsewhere. Let's learn through a simple example.

<svg width="600px" height="100px"> 
    <defs> 
    <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth"> <path d="M0,0 L0,6 L9,3 z" fill="#f00" /> 
    </marker>
    </defs> 
    <line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" marker-end="url(#arrow)" />
</svg>

Marker's properties

The markerWidth and markerHeight properties define the width and height of the marker window.

In the above example, I set both markerWidth and markerHeight to 10px. The triangle drawn in the path needs to fit into the 9px x 6px area, so I can also set the markerWidth to 9 and the markerHeight to 6. This is the minimum size that the marker can accept. Any size smaller than this will cause the graphic to be cropped.
The next two attributes, refX and refY, refer to the position coordinates of the connection between the graphic element and the marker. We also applied a transform to the scene behind it to move the marker and align it with it.

The next attribute, orient, is why I don’t need to adjust the marker when converting the direction of the line. It accepts an auto value, or an angle value, which determines whether the marker should be rotated when connected to other content.

auto This value indicates that the marker will rotate together with the applied element. The value 45deg means that the direction of the marker always remains 45deg and will not rotate with the connected elements. Most of the time this value is set to auto.

The last attribute is markerUNits, which is used to determine whether the marker is scaled. It defines markerWidth and markerHeight, as well as the coordinate system of the marker's content itself.

It accepts two values, strokeWidth and userSpaceOnUse. The default value is strokeWidth, which is what you will set in most cases because it allows your marker to scale with the line it is connected to.

strokeWidth: The marker value in the coordinate system and the unit of the current stroke width are the same size. In other words, the strokeWidth value allows your marker to be scaled.
userSpaceOnUse: The value of marker is the value of the current user coordinate system. That is to say, if your marker is a circle with a radius of 10px, it will always have a radius of 10px, regardless of the connected elements.

Marker properties - referencing markers in elements

marker-end="url(#arrow)”

There are four ways to apply markers to basic graphics such as line, path, polyline and polygon:

• marker-start=”url(#marker-id)”

• marker-mid=”url(#marker-id)”

• marker-end=”url(#marker-id)”

• marker=”url(#marker-id)”

Recommended related articles:

How to implement coordinate system transformation in svg (with code)

Summary of various methods of using svg in react (with code)

The above is the detailed content of The use of elements in svg and the introduction of marker attributes. For more information, please follow other related articles on the PHP Chinese website!