SVG 参考
SVG 元素
| 元素 | 描述 | 属性 |
|---|---|---|
| <a> | 创建围绕 SVG 元素的链接 | xlink:显示 xlink:执行 链接:href 目标 |
| <altGlyph> | 提供对用于呈现特定字符数据的字形的控制 | X 是 解析 靜 旋转 字形参考 格式 链接:href |
| <altGlyphDef> | 定义字形的替换集 | ID |
| <altGlyphItem> | 定义字形替换的候选集 | ID |
| <animate> | 定义元素的属性如何随时间变化 | attributeName="目标属性的名称" by="相对偏移值" from="起始值" to="结束值" dur="持续时间" repeatCount="动画发生的次数" |
| <animateMotion> | 使引用元素沿运动路径移动 | calcMode="动画的插值模式。可以是 'discrete', 'linear', 'paced', 'spline'" path="运动路径" keyPoints="物体在运动路径上移动的距离" rotate="应用旋转变换" xlink:href="URI 引用<path>定义运动路径的元素” |
| <animateTransform> | 对目标元素上的变换属性进行动画处理，从而允许动画控制平移、缩放、旋转和/或倾斜 | by="相对偏移值" from="起始值" to="结束值" type="变换类型，其值随时间变化。可以是“平移”、“缩放”、“旋转”、“倾斜X”、“倾斜Y”" |
| <circle> | 定义一个圆 | cx="圆的 x 轴中心" cy="圆的 y 轴中心" r="圆的半径"。必填。 + 演示属性： 颜色、填充描边、图形 |
| <clipPath> | 剪切就是隐藏通常会被绘制的内容。定义哪些是绘制的、哪些不是绘制的模板称为剪切路径 | clip-path="引用的剪切路径与引用的剪切路径相交" clipPathUnits="'userSpaceOnUse' 或 'objectBoundingBox'。第二个值使子对象的单位成为使用掩码的对象边界框的一小部分（默认值：'userSpaceOnUse'）” |
| <color-profile> | 指定颜色配置文件描述（当使用 CSS 设置文档样式时） | local="本地存储的颜色配置文件的唯一ID" 名称="" 渲染意图=“自动|感知|相对比色|饱和度|绝对比色” xlink:href="ICC 配置文件资源的 URI" |
| <cursor> | 定义与平台无关的自定义光标 | x="光标的 x 轴左上角（默认为 0）" y="光标的 y 轴左上角（默认为 0）" xlink:href="用作光标的图像的 URI |
| <defs> | 引用元素的容器 | |
| <desc> | SVG 中容器元素或图形元素的纯文本描述（用户代理可能会将文本显示为工具提示） | |
| <ellipse> | 定义一个椭圆 | cx="椭圆的 x 轴中心" cy="椭圆的 y 轴中心" rx="椭圆半径沿 x 轴的长度"。必填项。 ry="椭圆半径沿 y 轴的长度"。必填。 + 演示属性： 颜色、填充描边、图形 |
| <feBlend> | 根据某种混合模式将两个对象组合在一起 | mode="图像混合模式：正常|乘法|屏幕|变暗|变亮" in="标识给定过滤器基元的输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint |<filter-primitive-reference> “ in2="混合操作的第二个输入图像" |
| 色彩矩阵 | SVG 滤镜。应用矩阵变换 | |
| 组件传输 | SVG 过滤器。执行数据的组件式重新映射 | |
| 复合材料 | SVG 过滤器。 | |
| feConvolve矩阵 | SVG 过滤器。 | |
| 漫反射照明 | SVG 过滤器。 | |
| feDisplacementMap | SVG 过滤器。 | |
| 远光灯 | SVG 过滤器。定义光源 | |
| 洪水泛滥 | SVG 过滤器。 | |
| 功能基因 | SVG 过滤器。feComponentTransfer 的子元素 | |
| 函数B | SVG 过滤器。feComponentTransfer 的子元素 | |
| 函数G | SVG 过滤器。feComponentTransfer 的子元素 | |
| 函数函数 | SVG 过滤器。feComponentTransfer 的子元素 | |
| 高斯模糊 | SVG 滤镜。对图像执行高斯模糊 | |
| 图像 | SVG 过滤器。 | |
| 合并 | SVG 滤镜。在彼此之上创建图像层 | |
| 合并节点 | SVG 过滤器。子元素合并 | |
| 形态学 | SVG 滤镜。对源图形执行“增粗”或“减细” | |
| 偏移量 | SVG 滤镜。将图像相对于其当前位置移动 | |
| 点光 | SVG 过滤器。 | |
| 镜面高光 | SVG 过滤器。 | |
| 聚光灯 | SVG 过滤器。 | |
| 菲蒂尔 | SVG 过滤器。 | |
| 湍流 | SVG 过滤器。 | |
| 筛选 | 滤镜效果容器 | |
| 字体 | 定义字体 | |
| 字体 | 描述字体的特征 | |
| 字体格式 | ||
| 字体名称 | ||
| 字体-face-src | ||
| 字体-face-uri | ||
| 异物 | ||
| <g> | 用于将元素分组 | id="群组名称" fill="组的填充颜色" opacity="该组的不透明度" + 演示属性： 全部 |
| 字形 | 定义给定字形的图形 | |
| 字形参考 | 定义可能使用的字形 | |
| 香港 | ||
| <image> | 定义图像 | x="图像的 x 轴左上角" y="图像的 y 轴左上角" width="图片宽度"。必填。 height="图片的高度"。必填。 xlink:href="图片路径"。必填。 + 演示属性： 颜色、图形、图像、视口 |
| <line> | 定义一条线 | x1="线的 x 起点" y1="线的 y 起点" x2="线的 x 端点" y2="线的 y 端点" + 演示属性： 颜色、填充笔触、图形、标记 |
| <linearGradient> | 定义线性渐变。线性渐变使用矢量填充对象，可以定义为水平、垂直或角度渐变。 | id="用于引用此模式的唯一 ID。引用时必填" gradientUnits="'userSpaceOnUse' 或 'objectBoundingBox'。使用视图框或对象来确定矢量点的相对位置。（默认 'objectBoundingBox'）” gradientTransform="应用于渐变的变换" x1="渐变向量的 x 起点（默认为数字或 % - 0%）" y1="渐变向量的 y 起点。（默认值为 0%）" x2="渐变向量的 x 端点。(默认 100%)" y2="渐变向量的 y 端点。（默认值为 0%）" spreadMethod="'pad' 或 'reflect' 或 'repeat'" xlink:href="引用另一个渐变，其属性值用作默认值并包含停止点。递归" |
| <marker> | 标记可以放置在线、折线、多边形和路径的顶点上。这些元素可以使用标记属性“marker-start”、“marker-mid”和“marker-end”，这些属性默认继承，也可以设置为“none”或已定义标记的 URI。您必须先定义标记，然后才能通过其 URI 引用它。任何类型的形状都可以放在标记内。它们绘制在它们所附着的元素的顶部 | markerUnits="'strokeWidth' 或 'userSpaceOnUse'。如果使用 'strokeWidth'，则一个单位等于一个笔划宽度。否则，标记不会缩放并使用与引用元素相同的视图单位（默认为 'strokeWidth'）" refx="标记与顶点连接的位置（默认0）" refy="标记与顶点连接的位置（默认0）" orient="'auto' 或始终显示标记的角度。'auto' 将计算使 x 轴成为顶点切线的角度（默认值为 0）" markerWidth="标记的宽度（默认3）" markerHeight="标记的高度（默认3）" viewBox="此 SVG 绘图区域中“看到”的点。4 个值由空格或逗号分隔。（最小 x、最小 y、宽度、高度）" + 演示属性： 全部 |
| <mask> | 蒙版是不透明度值和剪切的组合。与剪切一样，您可以使用形状、文本或路径来定义蒙版的各个部分。蒙版的默认状态是完全透明的，与剪切平面相反。蒙版中的图形设置蒙版的不透明部分 | maskUnits="'userSpaceOnUse' 或 'objectBoundingBox'。设置剪切平面是否相对于完整视口或对象（默认值：'objectBoundingBox'）" maskContentUnits="使用第二个百分比来使遮罩图形相对于对象的位置。'userSpaceOnUse' 或 'objectBoundingBox' (默认值：'userSpaceOnUse')" x="蒙版的剪切平面（默认值：-10%）" y="蒙版的剪切平面（默认值：-10%）" width="蒙版的剪切平面（默认值：120%）" height="蒙版的剪切平面（默认值：120%）" |
| 元数据 | 指定元数据 | |
| 缺失字形 | ||
| 路径 | ||
| <path> | 定义路径 | d="定义路径的一组命令" pathLength="如果存在，路径将被缩放，以便计算出的点的路径长度等于该值" transform="变换列表" + 演示属性： 颜色、填充笔触、图形、标记 |
| <pattern> | 定义您希望视图显示的坐标和视图的大小。然后将形状添加到图案中。当视图框（查看区域）的边缘被击中时，图案会重复 | id="用于引用此模式的唯一 ID。" 必填。 patternUnits="'userSpaceOnUse' 或 'objectBoundingBox'。第二个值使 x、y、宽度、高度的单位成为使用该模式的对象边界框的分数（或％）。" patternContentUnits="'userSpaceOnUse' 或 'objectBoundingBox'" patternTransform="允许转换整个图案" x="图案与左上角的偏移量（默认为 0）" y="图案与左上角的偏移量。（默认为 0）" width="图案图块的宽度（默认 100%）" height="图案平铺的高度（默认100％）" viewBox="此 SVG 绘图区域中“看到”的点。4 个值由空格或逗号分隔。（最小 x、最小 y、宽度、高度）" xlink:href="引用另一个模式，该模式的属性值用作默认值，并且任何子模式都会被继承。递归" |
| <polygon> | 定义至少包含三条边的图形 | points="多边形的点。点的总数必须是偶数"。必填。 fill-rule="FillStroke 表示属性的一部分" + 演示属性： 颜色、填充笔触、图形、标记 |
| <polyline> | 定义仅由直线组成的任何形状 | points="折线上的点"。必填。 + 演示属性： 颜色、填充笔触、图形、标记 |
| <radialGradient> | 定义径向渐变。径向渐变是通过画一个圆并平滑地改变从焦点到外半径的渐变停止点之间的值来创建的。 | gradientUnits="'userSpaceOnUse' 或 'objectBoundingBox'。使用视图框或对象来确定矢量点的相对位置。（默认 'objectBoundingBox'）” gradientTransform="应用于渐变的变换" cx="渐变的中心点（数字或 % - 50% 为默认值）" cy="渐变的中心点。（默认 50%）" r="渐变的半径。（默认50%）" fx="渐变的焦点。（默认值为 0%）" fy="渐变的焦点。（默认为 0%）" spreadMethod="'pad' 或 'reflect' 或 'repeat'" xlink:href="引用另一个渐变，其属性值用作默认值并包含停止点。递归" |
| <rect> | 定义一个矩形 | x="矩形的 x 轴左上角" y="矩形的 y 轴左上角" rx="x 轴半径（用于圆整元素）" ry="y 轴半径（用于圆整元素）" width="矩形的宽度"。必填。 height="矩形的高度" 必填。 + 演示属性： 颜色、填充描边、图形 |
| 脚本 | 脚本容器（例如 ECMAScript） | |
| 放 | 设置属性值并持续指定时间 | |
| <stop> | 渐变的停止点 | offset="此停靠点的偏移量（0 至 1/0% 至 100%）"。必填。 stop-color="此站点的颜色" stop-opacity="此站点的不透明度（0 到 1）" |
| 风格 | 允许将样式表直接嵌入 SVG 内容中 | |
| <svg> | 创建 SVG 文档片段 | x="嵌入时左上角（默认 0）" y="嵌入时左上角（默认 0）" width="svg 片段的宽度 (默认 100%)" height="svg 片段的高度 (默认 100%)" viewBox="此 SVG 绘图区域中“看到”的点。4 个值由空格或逗号分隔。（最小 x、最小 y、宽度、高度）" retainAspectRatio="'none' 或 'xVALYVAL' 的 9 种组合中的任意一种，其中 VAL 为 'min'、'mid' 或 'max'。（默认 xMidYMid）" zoomAndPan="'放大' 或 '禁用'。放大选项允许用户平移和缩放文件（默认放大）" xml="最外层<svg>元素需要设置 SVG 及其命名空间：xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + 演示属性： 全部 |
| 转变 | ||
| 象征 | ||
| <text> | 定义文本 | x="x 轴位置列表。第 n 个 x 轴位置分配给文本中的第 n 个字符。如果位置用完后还有其他字符，则这些字符将放置在最后一个字符之后。默认值为 0" y="y 轴位置列表。（参见 x）。默认值为 0" dx="长度列表，相对于最后绘制的字形的绝对位置移动字符。（见 x）" dy="长度列表，用于将字符相对于最后绘制的字形的绝对位置进行移动。（参见 x）" rotate="旋转列表。第 n 次旋转在第 n 个字符上执行。其他字符不会获得最后的旋转值" textLength="SVG 查看器将尝试通过调整间距和/或字形来显示文本的目标长度。（默认值：文本的正常长度）" lengthAdjust="如果指定了长度，则告诉查看者需要调整什么才能尝试完成文本渲染。两个值分别是“spacing”和“spacingAndGlyphs”" + 演示属性： 颜色、填充笔触、图形、字体规范、文本内容元素 |
| 文本路径 | ||
| 标题 | SVG 中元素的纯文本描述 - 不作为图形的一部分显示。用户代理可能会将文本显示为工具提示 | |
| <tref> | 参考任何<text> SVG 文档中的元素并重用它 | 与<text>元素 |
| <tspan> | 与<text>元素，但可以嵌套在文本标签内及其自身内 | 与<text>元素 + 此外： xlink:href="参考<text>元素” |
| <use> | 使用 URI 来引用<g> ，<svg> 或其他具有唯一 id 属性的图形元素并复制它。副本只是对原件的引用，因此文档中只存在原件。对原件的任何更改都会影响所有副本。 | x="克隆元素的 x 轴左上角" y="克隆元素的 y 轴左上角" width="克隆元素的宽度" height="克隆元素的高度" xlink:href="克隆元素的 URI 引用" + 演示属性： 全部 |
| 看法 | ||
| 维克恩 |
