SVG 元素
元素列中的链接指向了具体元素的相关属性和更多有用的信息。
元素 | 描述 |
a | 定义超链接 |
altGlyph | 允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字） |
altGlyphDef | 定义一系列象性符号的替换（例如，音乐符号或者亚洲文字） |
altGlyphItem | 定义一系列候选的象性符号的替换 |
animate | 随时间动态改变属性 |
animateColor | 规定随时间进行的颜转换 | svg图形
animateMotion | 使元素沿着动作路径移动 |
animateTransform | 对元素进行动态的属性转换 |
circle | 定义圆 |
clipPath | |
color-profile | 规定颜配置描述 |
cursor | 定义独立于平台的光标 |
definition-src | 定义单独的字体定义源 |
defs | 被引用元素的容器 |
desc | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
ellipse | 定义椭圆 |
feBlend | SVG 滤镜。使用不同的混合模式把两个对象合成在一起。 |
feColorMatrix | SVG 滤镜。应用matrix转换。 |
feComponentTransfer | SVG 滤镜。执行数据的 component-wise 重映射。 |
feComposite | SVG 滤镜。 |
feConvolveMatrix | SVG 滤镜。 |
feDiffuseLighting | SVG 滤镜。 |
feDisplacementMap | SVG 滤镜。 |
feDistantLight | SVG 滤镜。 Defines a light source |
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 | 用于把相关元素进行组合的容器元素。 |
glyph | 为给定的象形符号定义图形。 |
glyphRef | 定义要使用的可能的象形符号。 |
hkern | |
image | |
line | 定义线条。 |
linearGradient | 定义线性渐变。 |
marker | |
mask | |
metadata | 规定元数据。 |
missing-glyph | |
mpath | |
path | 定义路径。 |
pattern | |
polygon | 定义由一系列连接的直线组成的封闭形状。 |
polyline | 定义一系列连接的直线。 |
radialGradient | 定义放射形的渐变。 |
rect | 定义矩形。 |
script | 脚本容器。（例如ECMAScript） |
set | 为指定持续时间的属性设置值 |
stop | |
style | 可使样式表直接嵌入SVG内容内部。 |
svg | 定义SVG文档片断。 |
switch | |
symbol | |
text | |
textPath | |
title | 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。 |
tref | |
tspan | |
use | |
view | |
vkern | |
SVG中可以添加三种基本的物件:文本,图形和路径。
SVG文本(text):<text y="15">blueknight</text>
SVG图形：1、矩形<rect width="300" height="100"/>
2、圆<circle cx="200"y="200"r="100"/>
<path d="M200,100c0,55.23-44.77,100-100,100S0,155.23,0,100S44.77,0,100,0s100,44.77,100,100z"/>
SVG路径(path):路径使用下面的属性来描述:"moveto" 设置新的坐标点 "lineto" 画一条直线 "curveto" 使用贝赛尔函数画制曲线 "arc" 画椭圆和圆 "closepath" 闭合路径
<path d="M 50 10 L 350 70 L 100 120 z"/>"M"代表moveto,设置坐标点,"L"代表"lineto",画一条直线,z代表结束。
SVG图形：1、矩形<rect width="300" height="100"/>
2、圆<circle cx="200"y="200"r="100"/>
<path d="M200,100c0,55.23-44.77,100-100,100S0,155.23,0,100S44.77,0,100,0s100,44.77,100,100z"/>
SVG路径(path):路径使用下面的属性来描述:"moveto" 设置新的坐标点 "lineto" 画一条直线 "curveto" 使用贝赛尔函数画制曲线 "arc" 画椭圆和圆 "closepath" 闭合路径
<path d="M 50 10 L 350 70 L 100 120 z"/>"M"代表moveto,设置坐标点,"L"代表"lineto",画一条直线,z代表结束。
SVG样式表(CSS): 内部样式表,植入式样式表,外部样式表。
植入式样式表：.st2{fill:none;stroke:#990000;stroke-width:2;}
SVG填充(fill)："填充"(fill)>>fill后面可使用的值: none, current-color, (color) "none"是无,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜值,(color)是自定义的彩。
"填充规则"(fillrule)>>fillrule后可使用的值: evenodd, nonzero, inherit 填充规则属性定义对所有路径区域填充或者只是对交叉部分填充"inherit" 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。
"填充透明度"(fill-opacity)>>fill-opacity后可使用的值: 0到1的任何数 填充透明度决定了一个物件的填充是实填充(透明度数值为1)还是透明的填充(透明度数值为0).关于物件的透明度属性其他还有如:"笔划透明度"(stroke-opacity),对应于笔划的透明程度;"透明"(opacity),对应于物件整体的透明程度。
植入式样式表：.st2{fill:none;stroke:#990000;stroke-width:2;}
SVG填充(fill)："填充"(fill)>>fill后面可使用的值: none, current-color, (color) "none"是无,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜值,(color)是自定义的彩。
"填充规则"(fillrule)>>fillrule后可使用的值: evenodd, nonzero, inherit 填充规则属性定义对所有路径区域填充或者只是对交叉部分填充"inherit" 指的是当前物件的填充属性和围绕它的物件(或物件组)的属性一致。
"填充透明度"(fill-opacity)>>fill-opacity后可使用的值: 0到1的任何数 填充透明度决定了一个物件的填充是实填充(透明度数值为1)还是透明的填充(透明度数值为0).关于物件的透明度属性其他还有如:"笔划透明度"(stroke-opacity),对应于笔划的透明程度;"透明"(opacity),对应于物件整体的透明程度。
SVG笔划(stroke):"笔划"(stroke)>>stroke后面可使用的值: none, current-color, (color)笔划属性决定了物件是否利用笔划进行勾勒,并且使用什么样颜的笔画。"none"是无,"Current-color"返回的是一个父文档(可以是XML文档或者SVG文档)的颜值,(color)是自定义的彩。
"笔划宽度"(stroke-width)>>stroke-width后可使用的值是: (width), inherit "笔划宽度"默认值是1像素宽度。用户也可以自定义宽度,可以使用像素值也可以使用百分比。这里的所有SVG图像都使用的是像素值."inherit"代表继承前面(父)的物件(或物件组)的笔划属性。
"笔划端点"(stroke-linecap)>>stroke-linecap可使用的值是: butt, round, square, inherit"笔划端点"的属性定义了开放笔划(未闭合)的端点的形状,分别是"粗大的"butt,"圆滑的"round,"平整的"square和"继承 的"inherit.
"笔划连接"(stroke-linejoin)>>stroke-linejoin可使用的值是:miter, round, bevel, inherit 笔划
连接属性定义了路径拐角的形状,"miter"是默认值,"round"光滑连接,"bevel"折线连接,"inherit"继承
"笔划圆角连接"(stroke-miterlimit)>>stroke-miterlimit后可使用的值是: (miterlimit), inherit "笔划圆角连接"定义了两条相交成一定角的线在连接处的圆滑程度。数值必须为大于1的整数,默认的值是8。
"虚线笔划"(stroke-dasharray)>>stroke-dasharray后可使用的值是:(dasharray), inherit <path >虚线笔划定义了使用虚线的虚化程度
SVG梯度(Gradients):梯度是填充和笔划属性的一个特殊应用。梯度可以产生用矢量完成的彩渐变。SVG支持线式的(linear)和圆式的(radial)彩梯度变化。
梯度属性的实现利用了(defs)标签(元素),这个标签包含了填充和笔划属性,由此,可以给物件加入特别的效果。结合下面的代码和例子,体会(defs)标签的含义和使用。
"笔划圆角连接"(stroke-miterlimit)>>stroke-miterlimit后可使用的值是: (miterlimit), inherit "笔划圆角连接"定义了两条相交成一定角的线在连接处的圆滑程度。数值必须为大于1的整数,默认的值是8。
"虚线笔划"(stroke-dasharray)>>stroke-dasharray后可使用的值是:(dasharray), inherit <path >虚线笔划定义了使用虚线的虚化程度
SVG梯度(Gradients):梯度是填充和笔划属性的一个特殊应用。梯度可以产生用矢量完成的彩渐变。SVG支持线式的(linear)和圆式的(radial)彩梯度变化。
梯度属性的实现利用了(defs)标签(元素),这个标签包含了填充和笔划属性,由此,可以给物件加入特别的效果。结合下面的代码和例子,体会(defs)标签的含义和使用。
<defs> <radialGradient id="gradient1" cx="150.0005"cy="100" r="113.7914" fx="150.0005" fy="100"> <stop offset="0.19" /> <stop offset="0.4782" /> <stop offset="1" /> </radialGradient></defs>
SVG滤镜:<svg width="4in" height="3in"> <defs> <filter id="CoolTextEffect"> </filter> </defs> <text >Text with a cool effect</text></svg>
两个关键的属性就是SourceGraphic和SourceAlpha.SourceGraphic表示了需要被滤镜的原始物件,例如图形,文 本.SourceAlpha和SourceGraphic属性上基本类似,但包含了一个alpha通道。这样可以通过alpha通道的值实现滤镜的功能。
通过简单滤镜的组合,还可以产生更加丰富和多样的效果来。一般,图像滤镜效果的产生首先是结合简单滤镜形成总的效果然后叠加入图像中产生最终图像。
<filter id="MyFilter"> <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> <feOffset in="blur" dx="4" dy="4" result="offsetBlurredAlpha"/> <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="specularOut"> <fePointLightx="-5000" y="-10000" z="20000"/> </feSpecularLighting> <feComposite in="specularOut" in2="SourceAlpha"operator="in" result="specularOut"/> <feComposite in="SourceGraphic" in2="specularOut"operator="arithmetic" k1="0" k2="1" k3="1"k4="0" result="litPaint"/> <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge></filter>
SVG和当前的标准网络图像(JPEG,GIF,PNG):image xling:href="/ "
SVG支持ICC彩模式:SVG文件可以自由的制定所使用的彩模式。使用ICC彩模式需要定义(icc-color)属性。SVG文件默认的彩是sRGB彩,但是你可以通过(icc-color)转换到ICC彩。
SVG和当前的标准网络图像(JPEG,GIF,PNG):image xling:href="/ "
SVG支持ICC彩模式:SVG文件可以自由的制定所使用的彩模式。使用ICC彩模式需要定义(icc-color)属性。SVG文件默认的彩是sRGB彩,但是你可以通过(icc-color)转换到ICC彩。
下面的例子中同时使用了两种彩定义,当用户系统支持ICC彩模式时(win98和Mac OS已经自动安装),就会以ICC模式显示下面的"S V G",填充#900000,笔划#800080。否则按照填充红,笔划#0000FF显示。 fill:red icc-color(myRGB,90,0,0);fill-opacity:.5; stroke:#0000FF icc-color(myRGB,128,0,128);
SVG的变形属性:"矩阵"( (a)(b)(c)(d)(e)(f) )>>"矩阵"定义了一个2*3的矩阵(或者看作六个数的一个数列). 它和元素相匹配.详细请参看下面其他"变化"的解释来理解.
"移动"( (tx)[(ty)] )>>"移动"属性的设置将移动元素.(tx)的值沿着x轴,(ty)的值沿着y轴.在六数数列中(即一个矩阵),数列的最后两位为(tx)(ty).
如果要放缩元素而元素又不在中心点(0,0),那么你必须先将元素移动使元素中心在中心点,然后执行"比例',元素放缩后,再将元素移动回到原来的位置.例如,要把一个在(150,100)出的元素缩小到50%,你需要执行下列步骤: 1. "移动"(150,100) 2. "比例" .5 3. "移动"(-150,-100) (请注意次序)
"旋转"( (rotate-angle) )>>"旋转"属性的设置可以控制元素绕着中心点(0,0)旋转任意角度(rotate-angle).例如,如果角度值(rotate-angle)为45 度,元素将会顺时针旋转45度.就像在"比例"中我们做的,如果元素不在中心点,我们首先要将它移动到中心点,然后旋转,再将它移回原来的位置.
"x轴倾斜">>"x轴倾斜"将在中心点(0,0)把元素在x轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"x轴倾斜"角度(angle)在第三位以弧度表示.
"y轴倾斜">>"y轴倾斜"将在中心点(0,0)把元素在y轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"y轴倾斜"角度(angle)在第二位以弧度表示.
SVG动画:颜动画>>(animateColor)元素定义了SVG颜动画的属性.
<animateColor attributeName="fill" attributeType="CSS" values="red;blue;yellow;green;red" dur="10s" repeatCount="indefinite" />attributeName定
"x轴倾斜">>"x轴倾斜"将在中心点(0,0)把元素在x轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"x轴倾斜"角度(angle)在第三位以弧度表示.
"y轴倾斜">>"y轴倾斜"将在中心点(0,0)把元素在y轴轴向倾斜一定角度(angle).在六数数列中(即一个矩阵),"y轴倾斜"角度(angle)在第二位以弧度表示.
SVG动画:颜动画>>(animateColor)元素定义了SVG颜动画的属性.
<animateColor attributeName="fill" attributeType="CSS" values="red;blue;yellow;green;red" dur="10s" repeatCount="indefinite" />attributeName定
义了彩动画的性质,即填充变,attributeType定义为SVG规范中已经给出 的具有动画性质的CSS(串接样式表 Cascading Stylesheets－简称CSS).其他的attributeType还有"XML"(动态标识语言)和"auto"(默认设置).
需要产生动画的元素知道了要对什么进行动画,(上面的例子中元素就是被标识的"gradient_star"),它还需要知道怎样进行变化来长生动画.这需要下面的属性值来描述:
from 定义起始数值 to 定义结束数值 by 定义相对的偏移值 values 一张相对分离的数值表
利用标签dur和repeatCount控制动画的时间属性.彩动画总的持续时间由dur决定,在这个例子中是10秒,动画的循环次数由 repeatCount定义,本例中repeatCount的值是不定值"indefinite",动画将无限循环播放下去.
运动路径>>(animateMotion)标签允许元素产生一些简单的旋转,放缩,移动和倾斜变化.
需要产生动画的元素知道了要对什么进行动画,(上面的例子中元素就是被标识的"gradient_star"),它还需要知道怎样进行变化来长生动画.这需要下面的属性值来描述:
from 定义起始数值 to 定义结束数值 by 定义相对的偏移值 values 一张相对分离的数值表
利用标签dur和repeatCount控制动画的时间属性.彩动画总的持续时间由dur决定,在这个例子中是10秒,动画的循环次数由 repeatCount定义,本例中repeatCount的值是不定值"indefinite",动画将无限循环播放下去.
运动路径>>(animateMotion)标签允许元素产生一些简单的旋转,放缩,移动和倾斜变化.
在(animateMotion)标签里添加路径数据,SVG元素将可以沿着路径产生运动."旋转"rotate属性控制SVG元素沿着特定路径运动时 的的旋转性质.旋转的值可以是一个相对于当前用户的图形系统中所给定的x轴定义的一个角度值,也可默认为"auto",即沿着路径方向旋转,或 是"auto-reflect",沿着路径方向的180度反方向旋转.在上面的例子中,沿垂直的八字形运动的元素旋转的值是-45度,沿着水平八字形运动 的元素旋转的值是"auto".
运动控制>> 默认的运动一般是线性运动.calcMode的下列属性能进一步控制元素的运动:
离散 动画将在两个数值之间产生跳跃的变化.
线性 默认设置.
步进 类似于线性,但定义了类线性变化的间隔值.
曲线 对应于按照贝赛尔曲线定义的时间-位置曲线.
运动控制>> 默认的运动一般是线性运动.calcMode的下列属性能进一步控制元素的运动:
离散 动画将在两个数值之间产生跳跃的变化.
线性 默认设置.
步进 类似于线性,但定义了类线性变化的间隔值.
曲线 对应于按照贝赛尔曲线定义的时间-位置曲线.
关键曲线 使用"曲线"模式,能够用最小的定义产生很复杂的变化.例如,实时的控制元素的x和y值,就能对应的实时控制元素的运动.
使用"曲线"模式,动画元素需要包含keySplines属性值.keySplines定义了贝赛尔曲线的关键控制点,来控制动画的变化.这样的控制允许平滑的产生变化(类似于淡入淡出的平滑效果),这一点在动画中非常重要
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论