/*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可选项为: 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(*,*,*,*)