-
svg查看全部
-
源碼不夠 沒有最后一節(jié)的html查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-3 基本操作API 1、創(chuàng)建圖形: document.createElementNS(ns, tagName) 1-1)SVG定義是在自己的namespace下, 而不是在html的namespace下,因?yàn)槠淇梢宰鳛橐粋€(gè)html文件存在, 因此, 若要再html下使用svg就需要在svg的namespace下創(chuàng)建 1-2)tagName:創(chuàng)建矩形, 圓形…… rect、circle…… 2、添加圖形: element.appendChild(childElement) 2-1)將創(chuàng)建的圖形加載到dom樹下 3、設(shè)置/獲取屬性: element.setAttribute(name, value) / element.getAttribute(name)查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【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)" : 坐標(biāo)與父坐標(biāo)相比的變化值, 變形查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-2 SVG的圖形和屬性 3-6)<polygon>: points, 自動(dòng)閉合 3-6-1)points: 多個(gè)點(diǎn)坐標(biāo), "x1 y1 x2 y2 x3 y3"查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-2 SVG的圖形和屬性 3-5)<polyline>: points 3-5-1)points: 多個(gè)點(diǎn)坐標(biāo), "x1 y1 x2 y2 x3 y3"查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-2 SVG的圖形和屬性 3-4)<line>: x1, y1, x2, y2 3-4-1)x1, y1: 點(diǎn) 1 3-4-2)x2, y2: 點(diǎn) 2查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-2 SVG的圖形和屬性 3-3)<ellipse>: cx, cy, rx, ry 3-3-1)cx, cy: 圓心位置 3-3-2)rx, ry: 維度半徑查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-2 SVG的圖形和屬性 3-2)<circle>: cx, cy, r 3-2-1)cx, cy:圓心的位置 3-2-2)r:半徑查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-2 SVG的圖形和屬性 3-1)<rect>: x, y, width, height, rx, ry 3-1-1)x, y:矩形坐標(biāo), 即左上角位置 3-1-2)width, height:寬高定義矩形x, y長(zhǎng)度 3-1-3)rx, ry:定義矩形圓角， 若只賦值rx, 沒有賦值ry, 則ry會(huì)直接使用rx的值， 同理ry查看全部
-
【Author LightXun】 【引用請(qǐng)轉(zhuǎn)明出處】 【SVG】 1-1 SVG簡(jiǎn)介 1、使用XML描述的矢量文件 2、W3C標(biāo)準(zhǔn)(1.1)(http://www.w3.org/TR/SVG11/) 3、瀏覽器支持情況(http://caniuse.com/#cats=SVG) 4、矢量圖與位圖 4-1)位圖是基于顏色的描述，描述一張圖片里每一個(gè)像素點(diǎn)的顏色，整體組合在一起 4-2)矢量圖是基于數(shù)據(jù)的描述，基于數(shù)學(xué)公式以怎樣曲線以及參數(shù)，用顏色填充來描述一張圖片 5、使用方式 5-1)瀏覽器直接打開 5-2)在HTML中使用<img>標(biāo)簽引用 5-3)直接在HTML中使用SVG標(biāo)簽 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 創(chuàng)建圖形 添加圖形 設(shè)置/獲取熟悉查看全部
-
基本圖形<rect>,<cirle>,<elipse>,<line>,<polyline>,<polygon> 屬性：fill、stroke，stroke-width，transform查看全部
-
<text x="" y="" dx="10 20 30 40 50 60" dy=""></text> dx可對(duì)每個(gè)字體控制查看全部
舉報(bào)
0/150
提交
取消