-
svg查看全部
-
源码不够 没有最后一节的html查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-3 基本操作API 1、创建图形: document.createElementNS(ns, tagName) 1-1)SVG定义是在自己的namespace下, 而不是在html的namespace下,因为其可以作为一个html文件存在, 因此, 若要再html下使用svg就需要在svg的namespace下创建 1-2)tagName:创建矩形, 圆形…… rect、circle…… 2、添加图形: element.appendChild(childElement) 2-1)将创建的图形加载到dom树下 3、设置/获取属性: element.setAttribute(name, value) / element.getAttribute(name)查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-2 SVG的图形和属性 1、基本图形: <rect>:矩形 | <circle>:圆 | <ellipse>:椭圆 | <line>:线 | <polyline>:折线 | <polygon>:多边形 2、基本属性 fill、 stroke、 stroke-width、 transform 2-1)fill = #FFB3AE : 填充的颜色 2-2)stroke = #971817 : 描边颜色 2-3)stroke-width = 10 : 描边宽度 2-4)transform = "rotate(30)" : 坐标与父坐标相比的变化值, 变形查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-2 SVG的图形和属性 3-6)<polygon>: points, 自动闭合 3-6-1)points: 多个点坐标, "x1 y1 x2 y2 x3 y3"查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-2 SVG的图形和属性 3-5)<polyline>: points 3-5-1)points: 多个点坐标, "x1 y1 x2 y2 x3 y3"查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-2 SVG的图形和属性 3-4)<line>: x1, y1, x2, y2 3-4-1)x1, y1: 点 1 3-4-2)x2, y2: 点 2查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-2 SVG的图形和属性 3-3)<ellipse>: cx, cy, rx, ry 3-3-1)cx, cy: 圆心位置 3-3-2)rx, ry: 维度半径查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-2 SVG的图形和属性 3-2)<circle>: cx, cy, r 3-2-1)cx, cy:圆心的位置 3-2-2)r:半径查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-2 SVG的图形和属性 3-1)<rect>: x, y, width, height, rx, ry 3-1-1)x, y:矩形坐标, 即左上角位置 3-1-2)width, height:宽高定义矩形x, y长度 3-1-3)rx, ry:定义矩形圆角， 若只赋值rx, 没有赋值ry, 则ry会直接使用rx的值， 同理ry查看全部
-
【Author LightXun】 【引用请转明出处】 【SVG】 1-1 SVG简介 1、使用XML描述的矢量文件 2、W3C标准(1.1)(http://www.w3.org/TR/SVG11/) 3、浏览器支持情况(http://caniuse.com/#cats=SVG) 4、矢量图与位图 4-1)位图是基于颜色的描述，描述一张图片里每一个像素点的颜色，整体组合在一起 4-2)矢量图是基于数据的描述，基于数学公式以怎样曲线以及参数，用颜色填充来描述一张图片 5、使用方式 5-1)浏览器直接打开 5-2)在HTML中使用<img>标签引用 5-3)直接在HTML中使用SVG标签 5-4)作为CSS背景查看全部
-
基本图形 <rect> <circle> <ellipse> <line> <polyline> <polygon> <rect> x y width height rx ry <circle> cx cy r <ellipse>cx cy rx ry <line>x1 y1 x2 y2 <polyline> points="x1 y1 x2 y2 x3 y3 x4 y4" <polygon>points="x1 y1 x2 y2 x3 y3 x4 y4" 基本属性 fill stroke stroke-width transform查看全部
-
基本操作API 创建图形 添加图形 设置/获取熟悉查看全部
-
基本图形<rect>,<cirle>,<elipse>,<line>,<polyline>,<polygon> 属性：fill、stroke，stroke-width，transform查看全部
-
<text x="" y="" dx="10 20 30 40 50 60" dy=""></text> dx可对每个字体控制查看全部
举报
0/150
提交
取消