SVG 参考手册
下表列出了 SVG 所有可用的元素和属性,以及说明
| 元素 | 说明 | 属性 |
|---|---|---|
| <a> | 创建一个SVG元素周围链接 | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | 允许对象性文字进行控制,来呈现特殊的字符数据 | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | 定义一系列象性符号的替换 | id |
| <altGlyphItem> | 定义一系列候选的象性符号的替换 | id |
| <animate> | 随时间动态改变属性 | attributeName from to dur repeatCount |
| <animateColor> | 定义随着时间的推移颜色转换 | by from to |
| <animateMotion> | 使元素沿着动作路径移动 | calcMode path keyPoints rotate xlink:href |
| <animateTransform> | 动画上一个目标元素变换属性,从而使动画控制平移,缩放,旋转或倾斜 | by from to type |
| <circle> | 显示一个圆 | cx cy rrequired + 显现属性:color FillStroke Graphics |
| <clipPath> | 用于隐藏位于剪切路径以外的对象部分。定义绘制什么和什么不绘制的模具被称为剪切路径 | clip-path clipPathUnits |
| <color-profile> | 指定颜色配置文件的说明(使用CSS样式文件时) | local name rendering-intent xlink:href |
| <cursor> | 定义一个独立于平台的自定义光标 | x y xlink:href |
| <defs> | 引用的元素容器 | |
| <desc> | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示 | |
| <ellipse> | 定义一个椭圆 | cx cy rxrequired ryrequired + 显现属性: color FillStroke Graphics |
| <feBlend> | 使用不同的混合模式把两个对象合成在一起 | mode> in in2 |
| feColorMatrix | SVG滤镜。适用矩阵转换 | |
| feComponentTransfer | SVG 滤镜,执行数据的 component-wise 重映射 | |
| feComposite | SVG 滤镜 | |
| feConvolveMatrix | SVG 滤镜 | |
| feDiffuseLighting | SVG 滤镜 | |
| feDisplacementMap | SVG 滤镜 | |
| feDistantLight | SVG滤镜。定义一个光源 | |
| feFlood | SVG滤镜 | |
| feFuncA | SVG 滤镜。feComponentTransfer 的子元素 | |
| feFuncB | SVG 滤镜。feComponentTransfer 的子元素 | |
| feFuncG | SVG 滤镜。feComponentTransfer 的子元素 | |
| feFuncR | SVG 滤镜。feComponentTransfer 的子元素 | |
| feGaussianBlur | SVG滤镜。执行高斯模糊图像 | |
| feImage | SVG滤镜 | |
| feMerge | SVG滤镜,建立在彼此顶部图像层 | |
| feMergeNode | SVG 滤镜,feMerge的子元素 | |
| feMorphology | SVG 滤镜,对源图形执行"fattening | thinning" | |
| feOffset | SVG滤镜,相对其当前位置移动图像 | |
| fePointLight | SVG滤镜 | |
| feSpecularLighting | SVG滤镜 | |
| feSpotLight | SVG滤镜 | |
| feTile | SVG滤镜 | |
| feTurbulence | SVG滤镜 | |
| filter | 滤镜效果的容器 | |
| font | 定义字体 | |
| font-face | 描述一种字体的特点 | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | 用于把相关元素进行组合的容器元素 | id fill opacity + 显现属性:All |
| glyph | 为给定的象形符号定义图形 | |
| glyphRef | 定义要使用的可能的象形符号 | |
| hkern | ||
| <image> | 定义图像 | x y widthrequired heightrequired xlink:hrefrequired + 显现属性: Color Graphics Images Viewports |
| <line> | 定义一条线 | x1 y1 x2 y2 + 显现属性: Color FillStroke Graphics Markers |
| <linearGradient> | 定义线性渐变。通过使用矢量线性渐变填充对象,并可以定义为水平,垂直或角渐变。 | id gradientUnits gradientTransform x1 y1 x2 y2 spreadMethod xlink:href |
| <marker> | 标记可以放在直线,折线,多边形和路径的顶点。这些元素可以使用maeker属性的"maeker-start","maeker-mid"和"maeker-end",继承默认情况下或可设置为"none"或定义的标记的URI。您必须先定义标记,然后才可以通过其URI引用。任何一种形状,可以把标记放在里面。他们绘制元素时把它们附加到顶部 | markerUnits refx refy orient markerWidth markerHeight viewBox + 显示属性: All |
| <mask> | 度屏蔽是一种不透明度值的组合和裁剪。像裁剪,您可以使用图形,文字或路径定义掩码的部分。一个掩码的默认状态是完全透明的,也就是裁剪平面的对面的。在掩码的图形设置掩码的不透明部分 | maskUnits maskContentUnits x y width height |
| metadata | 指定元数据 | |
| missing-glyph | ||
| mpath | ||
| <path> | 定义一个路径 | d pathLength transform + 显现属性: Color FillStroke Graphics Markers |
| <pattern> | 定义坐标、想要显示的视图和视图的大小。然后添加到模式形状中 该模式命中时重复视图框的边缘(可视范围) |
idrequired patternUnits patternContentUnits patternTransform xy width height viewBox xlink:href |
| <polygon> | 定义一个包含至少三边图形 | pointsrequired fill-rule + 显现属性: Color FillStroke Graphics Markers |
| <polyline> | 定义只有直线组成的任意形状 | pointsrequired 显现属性: Color FillStroke Graphics Markers |
| <radialGradient> | 定义放射性渐变。放射性渐变创建一个圆圈 | gradientUnits gradientTransform cy r fx fy spreadMethod xlink:href |
| <rect> | 显示一个矩形 | x y rx ry widthrequired heightrequired + 显现属性: Color FillStroke Graphics |
| script | 脚本容器(例如ECMAScript) | |
| set | 设置一个属性值指定时间 | |
| <stop> | 渐变停止 | offset stop-color stop-opacity |
| style | 可使样式表直接嵌入SVG内容内部 | |
| <svg> | 创建一个SVG文档片段 | x y width height viewBox preserveAspectRatio zoomAndPan xml xmlns xmlns:xlink xml:space 显现属性: All |
| switch | ||
| symbol | ||
| <text> | 显示一个文本 | x y dx dy rotate textLength lengthAdjust 显现属性: Color FillStroke Graphics FontSpecification TextContentElements |
| textPath | ||
| title | 对 SVG 中的元素的纯文本描述 并不作为图形的一部分来显示 用户代理会将其显示为工具提示 |
|
| <tref> | 引用任何SVG文档中的<text>元素和重用 | 与<TEXT>元素相同 |
| <tspan> | 元素等同于<text>,但可以在内部嵌套文本标记以及内部本身 | 与 <text> 元素相同 附加: xlink:href |
| <use> | 使用URI引用一个<G>,<svg>或其他具有一个唯一的ID属性和重复的图形元素。复制的是原始的元素,因此文件中的原始存在只是一个参考。原始影响到所有副本的任何改变。 | x y width height xlink:href + 显示属性: All |
| view | ||
| vkern |