svg snap 笔记

Posted 2020-06-09

路径中的字母，大写相对于左上角绝对定位，小写相对定位  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);