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

你可能感兴趣的:(raphael.js,Raphael)