路径中的字母,大写相对于左上角绝对定位,小写相对定位  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 笔记的更多相关文章

  1. svg学习笔记(一)

    SVG——可扩展适量图形,基于XML PC端:IE9+   wap端:表现良好,适合使用 基础图形: line(线段)  <line x1="25" y1="150 ...

  2. svg学习笔记(二)

    SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w ...

  3. svg学习笔记

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 9. svg学习笔记-裁剪和蒙版

    裁剪 在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在&l ...

  5. 8. svg学习笔记-文本

    毫无疑问,文本也是svg中组成的重要部分,在svg中,用<text>元素来创建文本,文本的使用格式如下: <text x="20" y="30" ...

  6. 7. svg学习笔记-图案和渐变

    之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案 图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的 ...

  7. 6. svg学习笔记-路径

    路径相比于多边形<polygon>元素具有更强绘图能力,<polygon>元素可以绘制任意的多边形,而路径可以绘制任意的轮廓线,是线段,曲线,圆弧的组合形式.svg中可以使用& ...

  8. 5. svg学习笔记-坐标系变换

    之前我们编写图形元素的时候,编写好了位置大小就是固定的,通过坐标系变换,可以移动缩放,旋转图形,但必须声明的是,进行变换时是图形相对于坐标系的变化,就是图形是不发生变化的,而是坐标系发生了变化,比如缩 ...

  9. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

随机推荐

  1. noip的一些模板(参考了神牛的博客)

    一.图论 1.单源最短路 洛谷P3371 (1)spfa 已加SLF优化 419ms #include <iostream> #include <cstdio> #includ ...

  2. 移植Linux-3.4.2内核到S3C2440

    一.BootLoader引导内核过程     1.Bootloader的工作     1.1.将内核读入内存     2.2.保存内核启动参数到指定位置,内核启动时去这个位置解析参数     3.3. ...

  3. Android01-布局篇

    在Android中,共有五种布局方式,分别是:LinearLayout(线性布局),FrameLayout(帧布局),AbsoluteLayout(绝对布局),RelativeLayout(相对布局) ...

  4. canvas图表详解系列(1):柱状图

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  5. [转载]AI教师正来势汹汹,教师饭碗堪优

    (原文标题:开门,机器人老师来了) 一. 开门,机器人老师到了 国庆几天,河南刚刚上演一幕新科技的大戏: 计算机和人展开了为期四天的人机大战.这一次,对垒的双方不再是李世乭和阿尔法狗,而是教师和人工智 ...

  6. JavaScript适配器模式

    适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 基本理论 适配器模式:将一个接口转换成客户端需要的接口而不 ...

  7. 用git上传代码到新浪云

    新浪云空间是国内免费的一个空间,不过有限制很多. 申请新浪云需要新浪账号,注册略. 使用新浪账号去http://sae.sina.com.cn申请一个空间 选择新建应用 可以选择使用php项目 管理应 ...

  8. OpenWRT 恢复出厂设置命令

    如果通过无线或者有线口无法连接到router,可以用恢复某些设置重新设置路由器. 1. 开机,等着一个工作灯亮的时候立即按下rest键2秒,然后就开始拼命闪烁,很好现在进入failsafe模式了. 2 ...

  9. Linux入门(16)——Ubuntu16.04下配置sublime text 3使用markdown

    sublime text 3安装两个插件: MarkDown Editing OmniMarkupPreviewer 有的人使用 MarkDown Editing markdownpreviewer ...

  10. 做多了国际化项目,你怎么处理时区不同的各种blabla...问题

    我们做的的都是国际化大项目,今天发现了个大bug,没错!是时区不同引起的,如果你觉得这还不简单,这样,这样,再这样不就可以了吗?我只能呵呵了. 先来普及一下基础知识 : 1.地球分为24时区,北京位于 ...