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
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.