动画元素
<animate>,<animateColor>,<animateMotion>,<animateTransform>,<discard> (en-US),<mpath>,<set>
容器元素
<a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown>
基本形状元素
<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>
描述性元素
<desc>, <metadata>, <title>
字体元素
<font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>
滤镜元素
<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow> (en-US), <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>
渐变元素
<linearGradient>, <meshgradient>, <radialGradient>, <stop>
图形元素
<circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>
图像渲染元素
<mesh>, <use>
光源元素
<feDistantLight>, <fePointLight>, <feSpotLight>
非渲染元素
<clipPath>, <defs>, <hatch> (en-US), <linearGradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialGradient>, <script>, <style>, <symbol>, <title>
绘制服务器元素
<hatch> (en-US), <linearGradient>, <meshgradient>, <pattern>, <radialGradient>, <solidcolor> (en-US)
可渲染元素
<a>, <circle>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <unknown>, <use>
形状元素
<circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>
结构元素
<defs>, <g>, <svg>, <symbol>, <use>
文本内容元素
<altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>
文本子内容元素
<altGlyph>, <textPath>, <tref>, <tspan>
未分类元素
<clipPath>, <color-profile>, <cursor>, <filter>, <foreignObject>, <hatchpath> (en-US), <meshpatch>, <meshrow>, <script>, <style>, <view>
圆 circle
SVG 元素是一个SVG的基本形状,用来创建圆,基于一个圆心和一个半径。
<svg viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50"/>
</svg>
椭圆 ellipse
ellipse元素是一个SVG基本形状,用来创建一个椭圆,基于一个中心坐标以及它们的x半径和y半径。
椭圆不能指定精确的椭圆倾向(假设,举个例子,你想画一个45度角倾斜的椭圆),但是可以利用transform属性实现旋转。
<svg width="120" height="120" viewPort="0 0 120 120">
<ellipse cx="60" cy="60" rx="50" ry="25"/>
</svg>
line
line元素是一个SVG基本形状,用来创建一条连接两个点的线。
<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>
<svg>
<line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"/>
</svg>
<svg>
<line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black" transform="rotate(-45 20 100)"/>
</svg>
polygon
polygon元素定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点。欲了解开放形状,请看
<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>
polyline
polyline元素是SVG的一个基本形状,用来创建一系列直线连接多个点。典型的一个polyline是用来创建一个开放的形状,最后一点不与第一点相连。欲了解闭合形状,请看 元素。
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewPort="0 0 120 120" version="1.1">
<polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20"/>
</svg>
rect
rect元素是SVG的一个基本形状,用来创建矩形,基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。
<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>
描述性元素
<desc>, <metadata>, <title>
desc
SVG绘画中的每个容器元素或图形元素都可以提供一个desc描述性字符串,这些描述只是纯文本的。如果当前的SVG文档片段在视媒体中呈现,desc元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到,它显示了desc元素但是不会显示路径元素或者别的图形元素。desc元素提升了SVG文档的可访问性。
<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>