码迷,mamicode.com
首页 > 其他好文 > 详细

svg snap 笔记

时间:2016-01-28 16:44:39      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

路径中的字母,大写相对于左上角绝对定位,小写相对定位  M110,95,95,110M115,100,100,115
 

pattern 类似于图片拼贴,可以把指定位置的图案用来填充

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表示应用渐变的这个元素计算的相对坐标(可以理解为百分比位置):
fill: "L(0, 0, 100, 100)#000-#f00:25-#fff"      //绝对,从(0,0)到100, 100, 从黑色到25%位置红色再到白色
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: [0, 0, 800, 600]
viewBox="x, y, width, height"       // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度,也就是选定一个区域,然后用选定的区域铺满SVG容器
 
Snap.animate(0, 90, function(val) {
littlePie.attr({
d: "M" + [pie.cx, pie.cy] + "U" + [pie.r / 2, 90 - val, 90 + val]                      //这个U指令没查到资料,做饼状图上看到
}00);
}, 1000);

svg snap 笔记

标签:

原文地址:http://www.cnblogs.com/chuangweili/p/5166507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!