var pattern = elem.pattern(100, 100, 10, 10);
circle.attr({
fill: pattern
});
当某个属性不需要任何东西的话,就填none:
element.attr({
fill: "none"
})
var ring = circle.use(); 创建一个元素的引用,可以用attr改变属性样式,但是要改变位置就需要就要用animate之类的,改变大小要作用于被use的那个元素上
path元素有一个d属性,它是字符串形式,定义元素路径。通过Snap.animate去逐渐改变它,可以改变元素的形状:
var path = svg.paper.path("");
path.attr({
d: "M" + [p1, p2, p3, p4, p1].join("L") + "Z"
});
clip (裁剪)定义了图像的边缘, 只有在clip(裁剪)定义的范围内,图像才显示。既可以用在一个元素上,也可以是一组(g)元素上
circle.attr({
clip: s.rect(40, 40, 20, 20)
});
对应clipPath元素:
<circle cx="50" cy="50" r="30" fill="#0000ff" clip-path="url(‘#Si36ohlde5‘)"></circle>
<defs>
<clipPath id="Si36ohlde5"><rect x="40" y="40" width="20" height="20"></rect></clipPath>
</defs>
旋转,第一个参数为旋转的角度angel, 后面如果提供了一个坐标,那么就用这个坐标作为圆心来旋转(缺省的话默认为元素中心):
rect.transform("r" + [angle, 200, 100]); //transform的值是由matrix,translate,rotate等组成的字符串
缩放,最后两个数字代表缩放的中心点,默认为元素中心:
transform: "s" + [2, 2, cx1, cy1]
移动,translate缩写:
transform: "t" + [30 ,60]
创建遮罩层的话使用mask(也可以把放进去的对象作为alpha mask合成到背景里),用法和g差不多:
mask.add(s.rect(0, 0, "100%", "100%")).attr({fill: "#fff"}); 用白色填充满SVG元素
mask.add(txt2); 这里面的元素形状决定遮罩的形状
渐变色,大写字母L或R表示从SVG表明偏移的绝对坐标。小写字母l或r表示应用渐变的这个元素计算的相对坐标(可以理解为百分比位置):
r(0.5, 0.5, 0.5)#000-#fff //r表示径向渐变,就是从中点到外,结束参数cx,cy,r以及(可选的)远离圆心的焦点fx,fy
给元素添加滤镜
ele.attr({
filter: s.filter(Snap.filter.blur(10));
});
修改文字属性:
pie.title.attr({
"#text": pieTitle
});
viewBox="x, y, width, height" // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度,也就是选定一个区域,然后用选定的区域铺满SVG容器
d: "M" + [pie.cx, pie.cy] + "U" + [pie.r / 2, 90 - val, 90 + val] //这个U指令没查到资料,做饼状图上看到