// svg 实例一 画圆 _________________________________________________________________________ // svg 实例二 矩形 _________________________________________________________________________ // svg 实例三 椭圆 _________________________________________________________________________ // svg 实例四 线 _________________________________________________________________________ // svg 实例五 多边形 _________________________________________________________________________ // svg 实例六 仅包含直线的形状 _________________________________________________________________________ // svg 实例七 路径 _________________________________________________________________________ // svg 实例八 渐变 _________________________________________________________________________ // svg 实例九 animation _________________________________________________________________________ /** * xlink:href : 表示要对svg中执行动画的目标元素 如果没定义标识离的最近的父元素 * attributeName : 动画元素的目标属性 * begin : 定义动画的开始 * dur : 定义动画的持续时间 * fill [freeze|remove] : freeze 定义动画执行完以后不返回初始状态 remove 定义动画执行完以后返回初始状态 * from : 定义了动画的起始值 * to : 定义动画的结束值 * x, y : 坐标 * repeatCount : 动画执行次数 */ /* 动画一 */ // 动画二 // svg 实例十 animateTransform _________________________________________________________________________ /** * attributeName : 动画元素的目标属性 * type : 类型转换值 translate | scale | rotate | skewX | skewY * from : 起始值 * to : 结束值 * begin : 动画开始时间 * dur : 动画持续时间 * fill [freeze|remove] : freeze 定义动画执行完以后不返回初始状态 remove 定义动画执行完以后返回初始状态 * stroke-dasharray(num1, num2) : 定义线的样式 num1, num2 定义虚线的2长短的长度 */ // svg 实例十 animateMotion _________________________________________________________________________ /** * animateMotion : 沿着某路径移动SVG元素获得动画效果 * path : 动画路径属性 动画将沿着这个路径移动 * repeatCount : 动画循环 * dur : 动画时间 */ /** * 三次贝塞曲线 移动动画 * path : M100 250, C100 50, 400 50, 400 250 三次贝塞尔曲线由M开始 C确定后三个点 C后面只能有3组数据 然后根据这三组数据取斜切的曲线 (100 250 确定初始点 100 50确定终点 这2个点确定一条直线 根据这条直线产生一个斜切的曲线) (400 5 确定另一个初始点 400 250确定终点 这2个点确定另外一条直线 根据这条直线产生一个斜切的曲线) */ // svg 实例十一 additive属性 _________________________________________________________________________ /** * additive : 控制了动画是否是增量式的 sum 增量式 : rect的 width + from的值作为初始值 其他属性类似 replace 非增量式 (默认from的值) */ // svg 实例十二 accumulate属性 _________________________________________________________________________ /** * accumulate : 控制动画是否是增量式的 sum 增量式 : rect的 每次的值都累加到一起 必须得是多次循环才能看出效果 (第一次循环 : width=200 height=200) (第二次循环 : width+from作为初始值 height+from作为初始值往外扩大200距离) none 非增量式 (不累计增加值) (第一次循环 : width=200 height=200) (第二次循环 : width=0 height=0 作为初始值) */ // svg 实例十三 中心点坐标例子 _________________________________________________________________________ /** * 非中心旋转例子 * x, y : 确定某个节点的中心点坐标 */ /** * 沿中心位置旋转例子 * 为了可以中心旋转 需要设置rect的x, y为宽 高的一半 * 移动时 使用transform 并且在rect外层套一个父层 */ // svg 实例十四 添加文本 _________________________________________________________________________ /** * 添加文本 * 文本的y轴圆心在下面 */ // svg 实例十五 剪切 /** * 设置剪切形状 * 可以用各种形状裁切 可以叠加无数个形状 */ // svg 实例十六 连接 // svg 实例十七 创建a连接 _________________________________________________________________________ var svg = document.getElementById('svg'); // 创造一个文本节点对象 // 必须指定命名空间 否则无法按svg格式解析 var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x", 100); text.setAttribute("y", 100); text.setAttribute('fill', '#FFF'); text.setAttribute('font-family', 'Microsoft YaHei'); //将文本内容添加到text节点对象中 text.appendChild(document.createTextNode("点我")); //创造链接节点 // 必须指定命名空间 var a=document.createElementNS("http://www.w3.org/2000/svg","a"); // setAttributeNS(命名空间, 连接, 连接地址) // http://www.w3.org/1999/xlink : 连接命名空间 // xlink:href : 连接属性 // http://so.com : 连接地址 a.setAttributeNS( "http://www.w3.org/1999/xlink", "xlink:href", "http://so.com"); a.appendChild(text); svg.appendChild(a); // svg 实例十八 添加图片 _________________________________________________________________________