当前位置:编程学习 > 网站相关 >>

svg标签

一、SVG中对图像标签的支持
 
Attribute
 
Style:
 
CSS fill 属性定义填充的颜色
 
CSS stroke-width 属性指定填充线宽
 
CSS stroke 属性指定border颜色
 
CSS fill-opacity 属性定义填充颜色的透明度(从0到1)
 
CSS stroke-opacity属性定义描边颜色的透明度(从0到1)
 
CSS opacity属性定义整个元素的透明度(从0到1)
 
CSS filter:url(#Gaussian_Blur)属性用来给元素链接滤镜。当链接到filters的id属性时,#是必须的。
 
 
Fill: 属性定义填充的颜色
 
 
Stroke: 属性指定border颜色
 
 
Stroke-width: 属性指定填充线宽
 
 
矩形 <rect>
 
Attribute:
 
width 属性指出矩形的宽
 
height 属性指出矩形的高。
 
rx and ry 属性定义矩形的圆角
 
x 属性定义矩形的左位置
 
y 属性定义矩形距上端的位置
 
 
圆 <circle>
 
Attribute:
 
cx 属性定义圆心的x坐标
 
cy 属性定义圆心的y坐标
 
r 属性定义圆的半径
 
 
 
椭圆 <ellipse>
 
Attribute:
 
cx 椭圆的中心点的x坐标
 
cy 椭圆的中心点的y坐标
 
rx 指出椭圆的横向半径
 
ry 指出椭圆的纵向半径
 
 
直线 <line>
 
x1指定起点的x坐标
 
y1指定起点的y坐标
 
x2指定终点的x坐标
 
y2指定终点的y坐标
 
 
折线 <polyline>
 
points属性定义多点的x,y坐标
 
 
多边形 <polygon>
 
points属性定义多边形每个角的x,y坐标
 
 
曲线路径描述和操作 <path>
 
M = moveto(M X,Y)
L = lineto(L X,Y)
H = horizontal lineto(H X)
V = vertical lineto(V Y)
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)
T = smooth quadratic Belzier curveto(T ENDX,ENDY)
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)
Z = closepath()
注意:上面所有的命令也可以表示成小写形式。大写字母表示绝对位置,小写字母表示相对位置。
 
L H V指令
 M起点X,起点YL(直线)终点X,终点YH(水平线)终点XV(垂直线)终点Y。
 
C指令——三次贝塞曲线
 C第一控制点X,第一控制点Y 第二控制点X,第二控制点Y曲线结束点X,曲线结束点Y。
 
S指令
 S第二控制点X,第二控制点Y 结束点X,结束点Y。
 
Q指令——二次贝塞曲线
 Q控制点X,控制点Y 曲线结束点X,曲线结束点Y。
 
T指令——映射
 T映射前面路径后的终点X,映射前面路径后的终点Y。
 
A指令
 Elliptical Arc,允许不闭合。可以想像成是椭圆的某一段,共七个参数。
 RX,RY指所在椭圆的半轴大小
 XROTATION指椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
 FLAG1只有两个值,1表示大角度弧线,0为小角度弧线。
 FLAG2只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针
 X,Y为终点坐标
 如M0,25,A12.5,12.5,0,1,1,0,25.01Z表示一个圆心在(12.5,25),半径为12.5的圆。其中起点和终点几乎重合,用Z指令将它们闭合,注意终点不能填(0,25),那样A指令是无法被解析的。
 
 
对于<path>、<text>元素和前述形状元素,可以利用Stroke 和Fill属性进行勾勒和填充,其中填充可以使用某种颜色,或使用<linearGradient>、<radialGradient>定义的渐变色,或是使用<pattern>定义的底纹填充模式。而对于<path>、<line>、<polyline>、<polygon>等元素,只要将其放入<marker>标记对中,即可按所定义的路径绘制箭头。
 
 
<linearGradient>标签用来定义一个svg线性渐变,<linearGradient>标签必须嵌套在<defs>标签里, 线性渐变可以被定义为,水平,垂直,角形渐变。当y1≠y2,x1=x2时,产生水平渐变, 当x1≠x2,y1=y2时,产生垂直渐变, 当y1≠y2,x1≠x2时,产生角形渐变. <linearGradient>标签的id属性定义渐变的唯一标识名。
 
<linearGradient>标签的x1,x2,y1,y2属性用来定义渐变的首尾位置.
 
 
渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
 
 
<radialGradient>标签用来定义一个svg径向渐变。radialGradient>标签必须嵌套在<defs>标签里。<radialGradient>的id属性定义了渐变的唯一标志名,cx,cy,r 属性定义外圆,fx,fy定义内圆,渐变颜色范围可以由两种或多种颜色组成。每一中颜色由一个<stop>标签描述。Offset属性用来定义渐变首尾的颜色。
 
 
对于<path>、<text>元素和各种形状元素,也可以对其轮廓内的区域作裁剪、蒙版和合成操作。<clipPath>利用上述各种元素描述裁剪路径,<mask>标记则支持单通道、三通道、和alpha通道操作。最后,SVG还支持图形中成组的概念,以上操作均可以对一组图形进行操作。
 
 
二、SVG中对图像过滤操作的支持
 
使用标记<filter>可以定义过滤器效果,在其中按照要施加的过滤操作的顺序依次罗列相应的标记。
 
feBlend
 
feColorMatrix
 
feComponentTransfer
 
feComposite
 
feConvolveMatrix
 
feDiffuseLighting
 
feDisplacementMap
 
feFlood
 
 
<feGaussianBlur>
 
Attribute:
 
stdDeviation 属性用来定义blur的值
 
in="SourceGraphic" 定义本效果的输入源是整个图像
 
feImage
 
feMerge
 
feMorphology
 
feOffset
 
feSpecularLighting
 
feTile
 
feTurbulence
 
feDistantLight
 
fePointLight
 
feSpotLight
 
一个svg滤镜必须在<defs>标签里定义。<filter>标签用来定义一个svg滤镜。<filter>标签有一个必须的id属性来唯一标识该滤镜应用到图像中。<filter>标签必须嵌套到<defs>标签里,<defs>标签是definitions的简写,允许特殊标签的定义。
 
 
 
三、SVG中对动画的支持
 
SVG中用标记<animateMotion>描述元素的移动效果,用<animateFlipbook>描述元素的弹跳效果,用<animateTransform>描述元素的放缩、旋转、偏斜等变换效果,用<animateColor>描述元素颜色的改变,还可以用<animate>描述元素的淡入淡出效果。
补充:Web开发 , 其他 ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,