preface

The previous article covered what SVG is, its history, and how to introduce and use it. This article will introduce the use of common graphic elements and the common use of stroke and fill.

The articles

Set foot on SVG | construct comprehensive functions and characteristics of SVG based article (a) –

Common basic graphic elements

In daily development, the following elements are often used:

  • <text>
  • <image>
  • <circle>
  • <ellipse>
  • <line>
  • <polygon>
  • <polyline>
  • <rect>
  • <path>

The Text Text

The text element defines a graphic consisting of text

Basic attributes:

  • X: the x coordinate of the text
  • Y: y coordinate of the text
  • Dx: the offset of x where the text is
  • Dy: the offset of y where the document is located
  • Text-anchor: Alignment of text
    • start
    • middle
    • end
    • Inherit (default), inherit the start property of the outer layer (if the outer layer is not set).
  • Rotate: Text rotation Angle. Each word
  • TextLength: Indicates the length of the text
  • LengthAdjust: Text length adjustment
    • Spacing is filled with Spaces (the default). When the content area is insufficient, the spacing is negative and the text overlaps
    • SpacingAndGlyphs stretches the text to fill the interval. Text is compressed when the content area is insufficient

PS: It should be noted that the text graphics start from the lower left corner. So you usually have to set an offset for dy

Example 1: font of text graphics and the starting point of drawing

  <svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <! -- Set a text graphic with font size 16 -->
    <text 
      x="0" y="0"
      font-size="16"
    >Gnome male - "!</text>
    <! -- Detail offset 16 to make graphics visible -->
    <text 
      x="50" y="0"
      dy="16"
      font-size="16"
    >Gnome male - "!</text>
    <! -- Change font -->
    <text 
      x="110" y="0"
      dy="16"
      font-family="宋体"
      font-size="16"
    >Gnome male - "!</text>
  </svg>
Copy the code

Example 2: Offset, alignment, rotation, and length adjustment of text graphics

  <svg class="border" width="200" height="300" viewBox="0 0 200 300">
    <text x="10" y="25">Gnome male - "!</text>
    <! -- offset by 10 in the x direction -->
    <text x="10" y="50" dx="10" dy="To 10">Gnome male - "!</text>
    <! -- Alignment default start -->
    <text x="100" y="75">Alignment!</text>
    <! -- Alignment: start -->
    <text x="100" y="100" text-anchor="start">Alignment!</text>
    <! -- Alignment: middle -->
    <text x="100" y="125" text-anchor="middle">Alignment!</text>
    <! -- Alignment: end -->
    <text x="100" y="150" text-anchor="end">Alignment!</text>
    <! -- Rotation 65 ° -->
    <text x="10" y="175" rotate="65">Rotate!</text>

    <! -- Spacing stretched in spacing mode -->
    <text x="10" y="200" textLength="8em" lengthAdjust="spacing">Length adjustment!</text>
    <! -- Spacing is compressed in spacing mode
    <text x="10" y="225" textLength="2em" lengthAdjust="spacing">Length adjustment!</text>
    <! -- Stretched text graphic length in spacingAndGlyphs mode -->
    <text x="10" y="250" textLength="8em" lengthAdjust="spacingAndGlyphs">Length adjustment!</text>
    <! -- Text graphic length compressed in spacingAndGlyphs mode -->
    <text x="10" y="275" textLength="2em" lengthAdjust="spacingAndGlyphs">Length adjustment!</text>
  </svg>
Copy the code

Image picture

A graph that defines a picture

Basic attributes:

  • X: the x coordinate
  • Y: the y coordinate
  • Width: indicates the image width. Can not pass, if not using the original pixel
  • Height: image height. Can not pass, if not using the original pixel
  • Xlink :href: the URL pointing to the image

Example: Import an image with the image tag

  <svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <image x="10" y="10" width="80" height="80" xlink:href=".. /.. /image/1.jpg"></image>
    <! -- SVG can also be introduced -->
    <image x="10" y="100" width="80" height="80" xlink:href=".. /.. /static/PPT.svg#ppt"></image>
  </svg>
Copy the code

Circle the round

Basic attributes:

  • R: radius of the circle
  • Cx: the x position of the center of the circle
  • Cy: the y position of the center of the circle

Example: Simply draw a circle

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
   <circle cx="50" cy="50" r="40"/>
</svg>
Copy the code

Here a circle with a center of (50,50) of radius 40 is drawn on a canvas of 200 by 200

The Ellipse Ellipse

Ellipse is a more general form of the circle element, and you can scale the x and y radii of the circle respectively (commonly known to mathematicians as the major and minor axis radii).

Basic attributes:

  • Rx: x radius of the ellipse
  • Ry: y radius of the ellipse
  • Cx: the x position of the center of the circle
  • Cy: the y position of the center of the circle

Example: Simply draw an ellipse

  <svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <ellipse cx="50" cy="90" rx="40" ry="80" />
  </svg>
Copy the code

The React rectangle

Basic attributes:

  • X: the x position in the upper left corner of the rectangle
  • Y: y position in the upper left corner of the rectangle
  • Width: indicates the width of the rectangle
  • Height: The height of the rectangle
  • Rx: X radius of a rounded circle
  • Ry: Indicates the y radius of a rounded circle

Example: Simply draw some rectangles

  <svg class="border" width="200" height="200" viewBox="0 0 200 200">
   <! -- width 60 height 40 rectangle -->
   <rect x="10" y="10" width="60" height="40" />
   <! -- rectangle with width of 60 and height of 40, rounded circle with radius of 10 in x direction and 10 in y direction -->
   <rect x="10" y="60" rx="10" ry="10" width="60" height="40" />
   <! -- Square when the width and height are the same
   <rect x="10" y="120" rx="20" ry="20" width="40" height="40" />
   <! - if the rounded circle radius of the rx | ry half as much as that of the corresponding wide | high, was given a round or oval - >
   <rect x="10" y="120" rx="20" ry="20" width="40" height="40" />
   <rect x="100" y="120" rx="30" ry="20" width="60" height="40" />
 </svg>
Copy the code

The following figure can be more intuitive to see the situation of rounding corners defined by rx RY

Line Line

Basic attributes:

  • X1: the x position of the starting point
  • Y1: y position of the starting point
  • X2: the x position of the endpoint
  • Y2: the y position of the endpoint

The line is colorless by default. Here the line is colored using the stroke property and the width of the line is set using stroke-width

Example: Draw a line

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
   <line x1="10" y1="50" x2="180" y2="150" stroke="orange" stroke-width="3"/>
 </svg>
Copy the code

Polyline line

A Polyline is a set of straight lines joined together. Because it can have many points, all points of a polyline are placed in a points property

Basic attributes:

  • Points: indicates the number of points. Each number is separated by a white space, comma, terminator, or newline character. Each point must contain two numbers, one for the x coordinate and one for the y coordinate. So the list of points (0,0), (1,1), and (2,2) can be written like this: “0,0,1,1,2,2”.

Example: Draw a broken line

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <polyline points="20110, 80160, 40, 60" stroke="orange"  stroke-width="3"/>
    <polyline points="100110, 160160, 140, 60" stroke="orange" fill="none" stroke-width="3"/>
  </svg>
Copy the code

As you can see from the image above, although the line is not closed, there is still a black fill area. In this case, you need to set the fill property to None to cancel the fill color

Polygon Polygon

Polygons are much like polylines in that they are made up of straight lines connecting a set of points. The difference is that polygon’s path automatically returns to the first point at the last point. Note that a rectangle is also a polygon, so if you need more flexibility you can create a rectangle out of a polygon.

Basic attributes:

  • Points: indicates the number of points. Each number is separated by a whitespace, comma, terminating command, or newline character. Each point must contain two numbers, one for the x coordinate and one for the y coordinate. So the list of points (0,0), (1,1), and (2,2) can be written like this: “0,0,1,1,2,2”. After the path is drawn, the graph closes, so the final line will be connected from position (2,2) to position (0,0).

Example: Draw a polygon

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <polygon points="50,60 55,80 70,80 60,90 65,105 50,95 35,105 40,90 30,80 45,80"
      stroke="red" fill="none" stroke-width="3"/>
  </svg>
Copy the code

Decorates the properties of a graph

As you can see from the graph example above, the graph is drawn, but why is the color black, how to modify the color

This brings us to two commonly used attributes stroke and fill

Stroke stroke

The stroke attribute defines the color of the outer outline of a given graphic element.

Available value:

Stroke: green | # 00 FFFF RGB (0,0,255) | | rgba (0,0,255,0.6) | none

Color value format support can be specified

  • Color character
  • Color hexadecimal
  • rgb
  • rgba

Example: Set a stroke for a circle

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <circle cx="50" cy="50" r="40" stroke="Rgba (0255255, 6)" stroke-width="20"/>
</svg>
Copy the code

Stroke-width: number Sets the stroke line width

You can clearly see that the stroke is extended from the center to the sides.

Opacity of stroke can also be set

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <circle cx="50" cy="50" r="40" stroke="RGB (0255255)" stroke-width="20" stroke-opacity="0.6"/>
</svg>
Copy the code

The effect is the same as above

The fill to fill

Fill is used to fill the color inside the graph. For a complex graph, the internal definition of the graph needs to be controlled by fill-rule

Available value:

The fill: green | # 00 FFFF RGB (0,0,255) | | rgba (0,0,255,0.6) | remove | freeze

Color value format support can be specified

  • Color character
  • Color hexadecimal
  • rgb
  • rgba

Rgba format at this stage so mainstream browsing support, IE 11 also support this format

For animation elements, you can specify the state of fill after the animation ends

  • Remove Remove after the animation ends
  • Freeze Freezes after the animation ends

Example: Set the fill color for the circle

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
    <circle cx="20" cy="20" r="20" fill="green"/>
    <circle cx="70" cy="20" r="20" fill="# 008000"/>
    <circle cx="120" cy="20" r="20" fill="RGB (0128, 0)"/>
    <circle cx="170" cy="20" r="20" fill="Rgba (0128, 0, 6)"/>
    <circle cx="20" cy="70" r="20" fill="# 008000" fill-opacity="0.6"/>
</svg>
Copy the code

Opacity of the fill can also be set

Fill-rule determines the interior of the figure

Fill is to fill the interior of a figure. Two algorithms are specified in SVG to determine the interior of a graph, defined by the fill-rule attribute

Fill-rules specify what rules to use to determine the inner region of the figure. As a appearance attribute, it can be applied to any element, but only to these eight elements: <altGlyph>, <path>, <polygon>, <polyline>, <text>, <textPath>, <tref>, and < tSPAN >.

Available value:

The fill – rule: nonzero (default) | evenodd

Nonzero algorithm

The Nonzero algorithm determines whether a point is “inside” or “outside” of the shape by drawing a ray from that point to infinity in any direction and then detecting where the shape intersects the ray. Counting from 0, each segment of the path that crosses the ray from left to right (clockwise) increases the result by 1, and each segment that crosses the ray from right to left (counterclockwise) decreases the result by 1. When the statistics are finished, if the result is 0, the point is outside; If the result is not zero, the point is inside.

Here’s an example:

As shown in the figure:

Point A: A ray emitted from point A in the figure

  • After 4-5 paths, from ray left to ray right, the statistic value is + 1
  • After 1-2 path, from ray left to ray right, the statistic value is + 1
  • After 3-4 paths, from ray right to ray left, the statistic value is -1
  • Finally, after 5-1 path(closed), from ray right to ray left, the statistic value is -1
  • The final statistic is 0, so A is on the outside

Point B: Same as A

Point C: The rays emanating from point C in the figure

  • First through 2-3 path, from ray left to ray right, statistics + 1
  • After 5-1 path, from ray left to ray right, the statistic value is + 1
  • The final statistic is 2, so point C is inside

Example: Using Nonzero to implement hollow graphics

Here, path is explained separately in a later article due to the lack of space. This path actually draws the inside and outside rectangles. The paths of the two rectangles are in different directions.

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
  <path fill="yellow" stroke="red"
      d="M50,50 v80 h80 v-80 z M70,70 h40 v40 h-40 z"/>
</svg>
Copy the code

The key to hollow is that the path of the inner rectangle is opposite to that of the outside, where the path is clockwise on the outside and counterclockwise on the inside

Evenodd algorithm

The Evenodd algorithm determines whether a point is “inside” or “outside” of the shape by drawing rays from that point to infinity in any direction and counting the number of path segments that intersect the rays among all path segments of the shape. If an odd number of path segments intersect the ray, the point is inside; If there are even numbers, the dots are on the outside.

As shown in the figure:

  • Point A: Intersection path: 4-5, 1-2, 3-4, 5-1. Even on the outside
  • Point B: Intersection path: 1-2. Odd numbers are inside
  • Point C: Intersection path: 2-3, 5-1. Even on the outside

Example: Using Nonzero to implement hollow graphics

<svg class="border" width="200" height="200" viewBox="0 0 200 200">
  <path fill="yellow" fill-rule="evenodd" stroke="red"
      d="M50,50 v80 h80 v-80 z M70,70 v40 h40 v-40 z"/>
</svg>
<svg class="border" width="200" height="200" viewBox="0 0 200 200">
  <path fill="yellow" fill-rule="evenodd" stroke="red"
      d="M50,50 v80 h80 v-80 z M70,70 h40 v40 h-40 z"/>
</svg>
Copy the code

Evenodd, we don’t care about the direction of the path

Write in the last

If there are problems or mistakes, please correct them. Path will be covered in the next article due to space constraints.

The resources

Source: MDN