SVG 参考手册
SVG 元素
| 元素 | 描述 | 属性 | 教程 |
|---|---|---|---|
| <a> | 围绕一个元素创建超链接 | href="要去的 URL" download="告诉浏览器下载 URL 而不是跳转到它" hreflang="链接指向页面的语言" referrerpolicy="获取 URL 时发送的引用者策略" rel="目标对象与链接对象的关系" target="链接打开的位置。可以是 _self, _parent, _top, _blank, 或一个名称" type="链接 URL 的 MIME 类型" |
示例 |
| <animate> | 随时间推移为元素的属性添加动画效果 | attributeName="目标属性的名称" by="相对偏移值" from="起始值" to="结束值" dur="持续时间" repeatCount="动画发生的次数" |
示例 |
| <animateMotion> | 设置元素如何在运动路径上移动 | calcMode="动画的插值模式。可以是 'discrete', 'linear', 'paced', 'spline'" path="运动路径" keyPoints="对象在运动路径上的前进程度" rotate="应用旋转变换" |
示例 |
| <animateTransform> | 为目标元素的变换属性添加动画效果 | by="相对偏移值" from="起始值" to="结束值" type="需要随时间改变值的变换类型。可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
示例 |
| <circle> | 定义一个圆 | r="圆的半径"。必需。 cx="圆的 x 轴中心" cy="圆的 y 轴中心" |
示例 |
| <clipPath> | 指定一个剪辑路径，用于 clip-path 属性 | clipPathUnits="'userSpaceOnUse' 或 'objectBoundingBox'。第二个值使子项单位成为蒙版所用对象边界框的比例（默认值：'userSpaceOnUse'）" | 示例 |
| <defs> | 用于引用元素的容器 | ||
| <desc> | 用于容器元素或图形元素的纯文本描述 | ||
| <ellipse> | 定义一个椭圆 | rx="椭圆的 x 半径"。必需。 ry="椭圆的 y 半径"。必需。 cx="椭圆的 x 轴中心" cy="椭圆的 y 轴中心" |
示例 |
| <feBlend> | SVG 滤镜。通过某种混合模式将两个图形组合在一起 | mode="图像混合模式：normal|multiply|screen|darken|lighten" in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="混合操作的第二个输入图像" |
示例 |
| <feColorMatrix> | SVG 滤镜。根据变换矩阵改变颜色 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" type="matrix | saturate | hueRotate | luminanceToAlpha" values="type 属性中为 matrix 类型设置的值" |
示例 |
| <feComponentTransfer> | SVG 滤镜。对每个像素执行分量重映射。可以调整亮度、对比度、色彩平衡等 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feComposite> | SVG 滤镜。使用合成操作逐像素地组合两个输入图像 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="混合操作的第二个输入图像" operator="over | in | out | atop | xor | lighter | arithmetic" |
|
| <feConvolveMatrix> | SVG 滤镜。应用矩阵卷积滤镜效果（包括模糊、边缘检测、锐化、浮雕和斜角） | ||
| <feDiffuseLighting> | SVG 滤镜。使用 alpha 通道作为凸起图来照亮图形 | ||
| <feDisplacementMap> | SVG 滤镜。使用 in2 属性中的图形的像素值来置换 in 属性中的图像 | ||
| <feDistantLight> | SVG 滤镜。在照明滤镜原语：<feDiffuseLighting> 或 <feSpecularLighting> 中指定一个远距离光源 | azimuth elevation |
|
| <feDropShadow> | SVG 滤镜。创建图形的下阴影 | dx="下阴影的 x 偏移量" dy="下阴影的 y 偏移量" stdDeviation="下阴影的模糊量" |
示例 |
| <feFlood> | SVG 滤镜。用 flood-color 和 flood-opacity 属性定义的颜色和不透明度填充滤镜子区域 | flood-color flood-opacity |
|
| <feFuncA> | SVG 滤镜。feComponentTransfer 的子元素 | ||
| <feFuncB> | SVG 滤镜。feComponentTransfer 的子元素 | ||
| <feFuncG> | SVG 滤镜。feComponentTransfer 的子元素 | ||
| <feFuncR> | SVG 滤镜。feComponentTransfer 的子元素 | ||
| <feGaussianBlur> | SVG 滤镜。模糊图形 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" stdDeviation edgeMode |
示例 |
| <feImage> | SVG 滤镜。从外部源获取图形数据并输出像素数据 | crossorigin preserveAspectRatio |
|
| <feMerge> | SVG 滤镜。混合输入图形层（同时应用滤镜效果而不是顺序应用） | ||
| <feMergeNode> | SVG 滤镜。将另一个滤镜的结果提供给其父级 <feMerge> 进行处理 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feMorphology> | SVG 滤镜。侵蚀或扩张图形（用于加粗或变细效果） | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" operator="erode | dilate" radius |
|
| <feOffset> | SVG 滤镜。偏移输入图形 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" dx dy |
示例 |
| <fePointLight> | SVG 滤镜。指定一个光源，可以创建点光源效果 | x y z |
|
| <feSpecularLighting> | SVG 滤镜。使用 alpha 通道作为凸起图来照亮源图形 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feSpotLight> | SVG 滤镜。指定一个光源，可以创建聚光灯效果 | x y z pointsAtX pointsAtY pointsAtZ specularExponent limitingConeAngle |
|
| <feTile> | SVG 滤镜。使用输入图形的重复图案填充目标矩形 | in="给定滤镜原语的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" | |
| <feTurbulence> | SVG 滤镜。使用 Perlin 湍流函数创建图形 | baseFrequency numOctaves seed stitchTiles type |
|
| <filter> | 滤镜效果的容器 | x y width height filterUnits primitiveUnits |
示例 |
| <foreignObject> | 包含来自不同 XML 命名空间的对象 | height width x y |
|
| <g> | 用于组合其他 SVG 元素的容器 | id="组的唯一名称" |
|
| <image> | 在 SVG 中包含图像（必须是 .jpeg, .png, 或其他 SVG 文件） | href="图像的 URL"。必需。 width="图像的宽度"。必需。 height="图像的高度"。必需。 x="图像左上角的 x 位置" y="图像左上角的 y 位置" preserveAspectRatio="图像如何缩放" crossorigin="CORS 请求的凭证标志值" decoding="sync | async | auto" |
示例 |
| <line> | 创建一条线 | x1="线条在 x 轴上的起点" y1="线条在 y 轴上的起点" x2="线条在 x 轴上的终点" y2="线条在 y 轴上的终点" |
示例 |
| <linearGradient> | 定义一个线性渐变 | id="渐变的唯一 ID"。必需 x1="渐变起点处的 x 位置"。默认为 0% x2="渐变终点处的 x 位置"。默认为 100% y1="渐变起点处的 y 位置"。默认为 0% y2="渐变终点处的 y 位置"。默认为 0% spreadMethod="渐变的扩展方法"。可能的值："pad", "reflect", "repeat"。默认为 "pad" href="引用另一个将用作模板的 <linearGradient> 元素" gradientUnits="x1, x2, y1, y2 的坐标系统"。可能的值："userSpaceOnUse" 和 "objectBoundingBox"。默认为 "objectBoundingBox" gradientTransform="对渐变坐标系的附加变换" |
示例 |
| <marker> | 定义一个图形，用于在特定的 <path>, <line>, <polyline> 或 <polygon> 元素上绘制箭头或多边形标记 | markerUnits="'strokeWidth' 或 'userSpaceOnUse'。如果使用 'strokeWidth'，则一个单位等于一个描边宽度。否则，标记不会缩放，并使用与引用元素相同的视图单位（默认为 'strokeWidth'）" refX="标记连接到顶点的位置（默认为 0）" refY="标记连接到顶点的位置（默认为 0）" orient="'auto' 或一个始终显示标记的角度。'auto' 将计算一个角度，使 x 轴成为顶点的切线（默认为 0）" markerWidth="标记的宽度（默认为 3）" markerHeight="标记的高度（默认为 3）" viewBox="此 SVG 绘图区域中"可见"的点。由空格或逗号分隔的 4 个值（最小 x，最小 y，宽度，高度）" |
示例 |
| <mask> | 定义一个 alpha 蒙版，用于将当前对象与背景进行像素组合。蒙版是透明度和剪切的组合。与剪切一样，您可以使用形状、文本或路径来定义蒙版的部分。蒙版的默认状态是完全透明的，这与剪切平面相反。蒙版中的图形决定了蒙版的哪个部分是透明的 | maskUnits="'userSpaceOnUse' 或 'objectBoundingBox'。设置剪切平面是相对于整个视口还是对象（默认值：'objectBoundingBox'）" maskContentUnits="与百分比一起使用，使蒙版图形位置相对于对象。'userSpaceOnUse' 或 'objectBoundingBox'（默认为 'userSpaceOnUse'）" x="蒙版的剪切平面（默认为 -10%）" y="蒙版的剪切平面（默认为 -10%）" width="蒙版的剪切平面（默认为 120%）" height="蒙版的剪切平面（默认为 120%）" |
示例 |
| <metadata> | 将元数据应用于 SVG 内容 | ||
| <mpath> | <animateMotion> 元素的子元素，它提供了引用外部 <path> 元素作为运动路径定义的能力 | ||
| <path> | 定义一个形状 | d="设置路径的形状" pathLength="路径的总长度" |
示例 |
| <pattern> | 定义一个可以在重复的 x 和 y 坐标间隔处重绘的对象 | id="用于引用此图案的唯一 ID"。必需。 patternUnits="'userSpaceOnUse' 或 'objectBoundingBox'。第二个值使 x、y、width、height 的单位成为使用图案的对象边界框的比例（或 %）。" patternContentUnits="'userSpaceOnUse' 或 'objectBoundingBox'" patternTransform="允许对整个图案进行变换" x="图案相对于左上角的偏移量（默认为 0）" y="图案相对于左上角的偏移量。（默认为 0）" width="图案瓦片的宽度（默认为 0）" height="图案瓦片的高度（默认为 0）" viewBox="此 SVG 绘图区域中"可见"的点。由空格或逗号分隔的 4 个值（最小 x，最小 y，宽度，高度）" href preserveAspectRatio |
示例 |
| <polygon> | 创建一个包含至少三条边的图形。多边形由直线组成，并且形状是"封闭的" | points="多边形的点列表。每个点必须包含一个 x 坐标和一个 y 坐标"。必需。 |
示例 |
| <polyline> | 定义任何只由直线组成的形状。该形状是开放的 | points="多边形的点列表。每个点必须包含一个 x 坐标和一个 y 坐标"。必需。 | 示例 |
| <radialGradient> | 定义一个径向渐变 | id="渐变的唯一 ID"。必需 cx="径向渐变结束圆的 x 位置"。默认为 50% cy="径向渐变结束圆的 y 位置"。默认为 50% fr="径向渐变起始圆的半径"。默认为 0% fx="径向渐变起始圆的 x 位置"。默认为 50% fy="径向渐变起始圆的 y 位置"。默认为 50% r="径向渐变结束圆的半径"。默认为 50% spreadMethod="定义渐变的扩展方法"。可能的值："pad", "reflect", "repeat"。默认为 "pad" href="定义对另一个将用作模板的 <radialGradient> 元素的引用" gradientUnits="定义 cx, cy, r, fx, fy, fr 的坐标系统"。可能的值："userSpaceOnUse" 和 "objectBoundingBox"。默认为 "objectBoundingBox" gradientTransform="定义对渐变坐标系的附加变换" |
示例 |
| <rect> | 定义一个矩形 | width="矩形的宽度"。必需。 height="矩形的高度"。必需。 x="矩形左上角的 x 位置" y="矩形左上角的 y 位置" rx="矩形圆角的 x 半径（用于圆角）"。默认为 0 ry="矩形圆角的 y 半径（用于圆角）"。默认为 0 pathLength="矩形周长的总长度" |
示例 |
| <script> | SVG 中脚本的容器 | crossorigin="定义 CORS 设置，如同 HTML <script> 元素所定义的" href="要加载的脚本的 URL" type="要使用的脚本语言类型"。默认为 application/ecmascript |
示例 |
| <set> | 在指定持续时间内设置属性的值 | attributeName="要更改的属性" to="属性的新值" begin="效果应该何时开始" |
|
| <stop> | 线性或径向渐变的停点 | offset="此停点的偏移量（0 到 1/0% 到 100%）"。必需。 stop-color="此停点的颜色" stop-opacity="此停点的透明度（0 到 1）"。默认为 1 |
示例 |
| <style> | 允许样式表直接嵌入在 SVG 中 | type="要使用的样式表语言类型"。默认为 text/css。 media ="样式适用于哪种媒体"。默认为 all title="样式表的标题（可用于切换备用样式表）" |
|
| <svg> | SVG 图形的容器 | xmlns="http://www.w3.org/2000/svg" x="SVG 容器的 x 位置"。默认为 0 y="SVG 容器的 y 位置"。默认为 0 width="SVG 容器的宽度"。默认为 auto height="SVG 容器的高度"。默认为 auto viewBox="当前 SVG 片段的 SVG 视口坐标"。包含 4 个值，由空格或逗号分隔。（最小 x，最小 y，宽度，高度）" preserveAspectRatio="如果 SVG 片段以不同的纵横比显示，它将如何变形"。可以是 none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax。默认为 xMidYMid |
|
| <switch> | |||
| <symbol> | 定义图形模板对象，这些对象可以由 <use> 元素实例化 | ||
| <text> | 定义文本 | x="文本起点的 x 位置"。默认为 0 y="文本起点的 y 位置"。默认为 0 dx="文本的水平偏移位置（相对于前一个文本位置）" dy="文本的垂直偏移位置（相对于前一个文本位置）" rotate="应用于文本中每个字母的旋转（以度为单位）" textLength="文本必须适应的宽度" lengthAdjust"文本应如何压缩或拉伸以适应 textLength 属性定义的宽度"。可以是 spacing| spacingAndGlyphs。默认为 spacing |
示例 |
| <textPath> | 沿路径形状渲染文本 | href="用于渲染文本的路径的 URL" lengthAdjust"文本应如何压缩或拉伸以适应 textLength 属性定义的宽度"。可以是 spacing| spacingAndGlyphs。默认为 spacing method="如何沿路径渲染字形。"可以是 align|stretch。默认为 align spacing="字形之间的空格"。可以是 auto|exact。默认为 exact startOffset="文本的开头应从路径的开头偏移多少"。可以是长度、百分比或数字 textLength="路径上文本的宽度"。可以是长度、百分比或数字。默认为 auto |
示例 |
| <title> | SVG 中元素的文本描述 - 不作为图形的一部分显示。浏览器通常将文本显示为工具提示 | none | |
| <tspan> | 定义 <text> 元素中的子文本 | x="文本起点的 x 位置"。默认为 0 y="文本起点的 y 位置"。默认为 0 dx="文本的水平偏移位置（相对于前一个文本位置）" dy="文本的垂直偏移位置（相对于前一个文本位置）" rotate="应用于文本中每个字母的旋转（以度为单位）" textLength="文本必须适应的宽度" lengthAdjust"文本应如何压缩或拉伸以适应 textLength 属性定义的宽度"。可以是 spacing| spacingAndGlyphs。默认为 spacing |
示例 |
| <use> | 获取 SVG 文档中的一个节点，并在其他地方复制它。 | x="克隆元素的左上角 x 位置" y="克隆元素的左上角 y 位置" width="克隆的宽度" height="克隆的高度" href="要复制的元素的 URL" |
|
| <view> | 如何查看图形（缩放级别或详细视图） | viewBox="SVG 视口在用户空间中的位置和尺寸。包含 4 个值，由空格或逗号分隔。（最小 x，最小 y，宽度，高度）" preserveAspectRatio="具有 viewBox 的元素如何适应具有不同纵横比的视口" |
