Raphael.js API 之 Element.attr()

来源：互联网发布：手机长时间摄像软件编辑：程序博客网时间：2024/05/21 02:48

/*API-8*/
Element.attr()
设置元素属性
参数列表：
attrName
   字符串类型 string
   属性名称
value
   字符串类型 string
   属性值
(or)
params
   Object类型
   object of name/value pairs
(or)
attrName
   字符串类型 string
   属性名称
(or)
attrNames
   数组
   需要返回属性的属性名称数组

返回值：参数列表中涉及属性名称所对应的元素对象
返回值：参数列表中涉及属性名称所对应的属性值
返回值：参数列表中属性数组所对应的属性值数组
返回值：无参数则返回修改后的该对象

属性参数可选用的设置参数

1：arrow-end 字符串类型在路径末端绘制箭头。设置的字符串格式：<type>[-<width>[-<length>]]
其中type可选项为： classic, block, open, oval, diamond, none
width可选项为：wide, narrow, medium
length可选项为：long,short,midium
示例：
   var raphael = Raphael(document.getElementById("test"),1000,1000);
   raphael.path("M 10 30 l 39 50").attr({
       'arrow-end':'classic-wide-long',
       stroke: '＃fff',
       'stroke-width': 2
       });
2：clip-rect 字符串类型剪切矩形用逗号或者空格隔开属性值：x,y, width and height
3: cusor 字符串类型鼠标指针在元素上的样式详细参见：http://blog.csdn.net/medivhq/article/details/22279085
4：cx number类型圆形或者椭圆的轴心x坐标
5：cy number类型圆形或者椭圆的轴心y坐标
6: fill 字符串类型填充内容：颜色或者图片
7：fill-opacity number类型填充的透明度
8：font 字符串类型字体
9：font-family 字符串类型字体集
10：font-size 字符串类型字体大小
示例：
var raphael = Raphael(document.getElementById("test"),1000,1000);
raphael.text(130,180,'Cup').attr({
       'font-size':50
       });
11:font-weight 字符串类型字体粗度 /*PS:字体粗细设置属于一种比较复杂的字体样式定义，之所以说它复杂，是因为字体本身粗细千变万化，没有统一标准，对于字体粗细的具体定义也各不相同。*/
12:height number类型
13：href 字符串类型某些特殊的元素会需要一些URL
14：opacity number类型透明度
15：path 字符串类型 SVG轨迹特殊格式的字符串
16：r number类型圆形，椭圆或者圆角矩形的半径
17：rx number类型椭圆水平方向半径
18：ry number类型椭圆垂直方向半径
19：src 字符串类型 imageURL ,只在image元素上起作用
示例：
   var raphael = Raphael(document.getElementById("test"),1000,1000);
   raphael.image().attr({
           src :'js/designer/images/48/start_event_empty.png',
           x:300,
           y:300,
           width:30,
           height:30
           })
20：stroke 字符串类型颜色属性
21：stroke-dasharray 字符串数组 [“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]中任何一个，类似于画边框虚线
示例：
var raphael = Raphael(document.getElementById("test"),1000,1000);
raphael.rect(100,100,100,50).attr({

       'stroke-dasharray':"-"
       });
22：stroke-linecap 字符串类型 [“butt”, “square”, “round”]
23: stroke-linejoin 字符串类型 [“bevel”, “round”, “miter”]
24：stroke-miterlimit number类型
25: stroke-opacity 字符串类型
26：stroke-width number类型单位像素默认值为1
27：target字符串类型使用href
28：text 字符串类型文本元素内容使用\n换行

29：text-ancho 字符串类型 [“start”, “middle”, “end”] 默认值为'middle'
30: title 字符串类型为给予的文本设置提示内容
31：transform 字符串类型
32：width number类型
33: x number类型
34；y number类型

渐变
   线性渐变格式： “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”,
   例子： “90-#fff-#000” (-90度从白到黑) “0-#fff-#f00:20-#000” (梯度从白到红，在%20处显示为黑色)
   放射性渐变： “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”,
   例子： “r#fff-#000” 梯度从白到黑 “r(0.25, 0.75)#fff-#000” 0.25-0.75之间梯度从白色到黑色(范围0-1只适用于圆和椭圆)
颜色可选参数
   颜色名称如：red
   #*** 短型HTML颜色标识
   #****** 全型HTML颜色标识
   rgb(*,*,*)
   rgb(*%,*%,*%)
   rgb(*,*,*,*)带透明度rgb格式
   rgb(*%,*%,*%,*%)
   hsb(*,*,*)
   hsb(*%,*%,*%)
   hsba(*,*,*,*)
   hsl(*,*,*)
   hsl(*%,*%,*%)
   hsla(*,*,*,*)

0 0