Animated elements

<animate>, <animateColor>, <animateMotion>, <animateTransform>, <discard> (en-us), <mpath>, <set>

Container element

<a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown>

Basic shape element

<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>

Descriptive element

<desc>, <metadata>, <title>

The font element

<font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>

Filter element

<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow> (en-US), <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>

The gradient element

<linearGradient>, <meshgradient>, <radialGradient>, <stop>

Graphic elements

<circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>

Image Rendering elements

<mesh>, <use>

The light source element

<feDistantLight>, <fePointLight>, <feSpotLight>

Non-rendered elements

<clipPath>, <defs>, <hatch> (en-US), <linearGradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialGradient>, <script>, <style>, <symbol>, <title>

Draw server elements

<hatch> (en-US), <linearGradient>, <meshgradient>, <pattern>, <radialGradient>, <solidcolor> (en-US)

Renderable element

<a>, <circle>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <unknown>, <use>

The shape elements

<circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>

Structural elements

<defs>, <g>, <svg>, <symbol>, <use>

Text content element

<altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>

Text child content elements

<altGlyph>, <textPath>, <tref>, <tspan>

Unclassified element

<clipPath>, <color-profile>, <cursor>, <filter>, <foreignObject>, <hatchpath> (en-US), <meshpatch>, <meshrow>, <script>, <style>, <view>

Circle circle

The SVG element is a basic SVG shape used to create circles, based on a center and a radius.

<svg viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="50"/>
</svg>
Copy the code

Ellipse of the ellipse

The ellipse element is an SVG base shape used to create an ellipse based on a central coordinate and their X and y radii.

The ellipse cannot specify the exact inclination of the ellipse (suppose, for example, you want to draw an ellipse with an Angle of 45 degrees), but you can use the Transform property for rotation.

<svg width="120" height="120" viewPort="0 0 120 120">
    <ellipse cx="60" cy="60" rx="50" ry="25"/>
</svg>
Copy the code

line

The line element is a basic SVG shape that creates a line connecting two points.

<svg width="120" height="120" viewPort="0 0 120 120">
    <line x1="20" y1="100" x2="100" y2="20" stroke="black" stroke-width="2"/>
</svg>
Copy the code

<svg>
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"/>
</svg>
Copy the code

<svg>
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black" transform="rotate(-45 20 100)"/>
</svg>
Copy the code

polygon

The polygon element defines a closed polygon shape made up of a set of straight line segments joined end to end. The last point connects to the first point. For open shapes, see

< SVG XMLNS = "http://www.w3.org/2000/svg" width = "120" height = "120" viewPort = "0 0 120 120" version = "1.1" > < polygon Points ="60,20 100,40 100,80 60,100 20,80 20,40"/> </ SVG >Copy the code

polyline

The polyline element is a basic shape of SVG used to create a series of straight lines connecting points. A polyline is typically used to create an open shape where the last point is not connected to the first point. For closed shapes, see elements.

< SVG XMLNS = "http://www.w3.org/2000/svg" width = "120" height = "120" viewPort = "0 0 120 120" version = "1.1" > < polylines Fill ="none" stroke="black" points="20,100, 40,60,80, 100,20"/> </ SVG >Copy the code

rect

The rect element is a basic shape of SVG that is used to create a rectangle based on an angular position and its width and height. It can also be used to create rounded rectangles.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

  <rect x="10" y="10" width="100" height="100"/>
</svg>
Copy the code

Descriptive element

<desc>, <metadata>, <title>

desc

Each container element or graphic element in an SVG drawing can provide a DESC descriptive string, which is plain text only. If the current SVG document fragment is rendered in visual media, the DESC element is not rendered as part of the graph. The alternative prompter, which can be seen or heard, displays the DESC element but does not display the path element or other graphic elements. The DESC element improves the accessibility of SVG documents.

  <svg width="80px" height="30px" viewBox="0 0 80 30">
    <defs>
      <linearGradient id="Gradient01">
        <stop offset="20%" stop-color="#39F" />
        <stop offset="90%" stop-color="#F3F" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)"  />
  </svg>
Copy the code

Ps:developer.mozilla.org/zh-CN/docs/…