SVG basics | SVG drawing-

The stroke attribute stroke of SVG is used to define the stroke style of an image. Stroke is a basic SVGCSS attribute. You can set stroke styles for any SVG image .,.

The stroke attribute stroke of SVG is used to define the stroke style of an image. Stroke is a basic svg css attribute. You can set stroke styles for any SVG image.

　STYLE attributes
We can use the style attribute in SVG graphics to set stroke and fill styles for graphics. The following is an example:

The above example defines a circle with a dark blue stroke and a light blue fill color.

　　Stroke example
You can use the stroke attribute to set the stroke effect for the graph. See the following example:

The above Code sets the stroke color to black for the circle. The result is as follows:

The returned results of the above Code are as follows:

The returned results are as follows:

Observe the line of the three paths when different stroke-linejoin CSS attributes are used. The following is the returned result:

This example defines a 10-pixel dotted line with a dotted line separated by 5 pixels. The returned results are as follows:

The first dotted line starts with a 10-pixel dotted line, followed by a 5-pixel gap, followed by a 5-pixel dotted line, followed by a 5-pixel gap, and continues following this pattern.

The second dotted line begins with a 10-pixel dotted line, followed by a 5-pixel gap, followed by a 5-pixel dotted line, followed by a 10-pixel gap, then follow this pattern to continue.

The following are their returned results:

In this example, set dash-offset to 5 pixels, which means that the dotted line will be rendered from the next 5 pixels in dotted line mode. Note that not all browsers support this attribute. The returned results of the above Code are as follows:

The returned results are as follows:

The above is the basis of SVG | SVG graphic stroke content. For more information, see the PHP Chinese website (www.php1.cn )!