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="渐变的唯一标识符". 必需 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="用于引用此模式的唯一标识符". 必需. 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="渐变的唯一标识符". 必需 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 的元素必须如何适应具有不同纵横比的视窗" |
