svg snap 笔记

【svg snap 笔记】的更多相关文章

路径中的字母,大写相对于左上角绝对定位,小写相对定位 M110,95,95,110M115,100,100,115 pattern 类似于图片拼贴,可以把指定位置的图案用来填充 var pattern = elem.pattern(100, 100, 10, 10); circle.attr({ fill: pattern }); 当某个属性不需要任何东西的话,就填none: element.attr({ …

svg学习笔记（一）

SVG——可扩展适量图形,基于XML PC端:IE9+ wap端:表现良好,适合使用基础图形: line(线段) <line x1="25" y1="150" x2="375" y2="50" stroke="#f00"></line> polyline(折线) <polyline points="250 75,350 100,100 0" stro…

svg学习笔记（二）

SMIL animation演示代码集锦 <svg width="1400" height="1600" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="120" y="160" x="160"> 马 <set attri…

svg学习笔记

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> html,body{margin:0px;padding:0px;height: 100%;} #my-svg{ position:relative; heig…

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

裁剪在svg中进行剪切,对整个svg元素而言,可以使用<svg>元素的viewbox属性,对于单个元素则可以使用<clipPath>元素.在单个图形元素上使用裁剪,可以在<defs>元素中声明一个<clipPath>元素,在<clipPath>元素中使用图形元素绘制一个选区,然后在要使用裁剪的元素上使用clip-path属性引用声明的<clipPath>元素即可. 示例1: <!DOCTYPE html> <htm…

8. svg学习笔记-文本

毫无疑问,文本也是svg中组成的重要部分,在svg中,用<text>元素来创建文本,文本的使用格式如下: <text x="20" y="30" style="font-family:'微软雅黑'; font-size:25px;">这是一个text元素</text> 其中的x和y属性默认情况下是第一个字符左下角的位置坐标,style中可以是CSS的文字相关属性,比如:font-family,font-size…

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

之前,我们仅仅使用纯色来为图形填充颜色和绘制轮廓,除此之外,我们还可以使用图案和渐变来填充图形或者是绘制轮廓. 图案图案的效果类似于,在网页中给一个元素指定背景图像,当背景图像的尺寸小于元素的尺寸的时候,背景图片会默认重复以填充整个元素.效果如下: 要创建一个图案,首先就需要定义一个重复用的图形对象,这个图形对象被称作tile(瓷砖),tile可以是任意的svg图形元素,包括<image>引用的外部图片文件,然后将tile放在<pattern>元素中作为子元素,建议将<pa…

6. svg学习笔记-路径

路径相比于多边形<polygon>元素具有更强绘图能力,<polygon>元素可以绘制任意的多边形,而路径可以绘制任意的轮廓线,是线段,曲线,圆弧的组合形式.svg中可以使用<path>元素绘制路径,所有描述轮廓线的数据都放在d属性中,并且所有的路径必须以moveto命令开始,命令以大写的M开始,后面跟着用空格或者逗号分隔的x坐标和y坐标,例如: <path d="M 10,10 L 110,130" stroke="black&qu…

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

之前我们编写图形元素的时候,编写好了位置大小就是固定的,通过坐标系变换,可以移动缩放,旋转图形,但必须声明的是,进行变换时是图形相对于坐标系的变化,就是图形是不发生变化的,而是坐标系发生了变化,比如缩放图形的时候,是图形的相对坐标系进行缩放然后图形重绘,所以你会看到怪异的现象,当你指定图形进行缩放的时候,图形也有了位移. translate变换 translate变化就是将图形进行位移,在图形元素上引用格式如下: transform="translate(x,y)" x是水平上的位移距…

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

svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素如果我们仅仅用于学习svg的时候可能不太会用到<g>元素,但当我们绘制特别复杂的图形的时候<g>元素可配上大用场.<g>元素的作用就是将其子元素作为一个组合,以备将来的复用.可以通过为<g>元素添加<title>子元素来为组合添加标题,详细的描述可以放在<…