Raphael.js API 之 Element.attr()
/*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(*,*,*,*)
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(*,*,*,*)
