-
1.創建圖形：document.createElementNS（ns,tagName) 2.添加圖形：element.appendChild(childElement); 3.設置/獲取屬性：element.setAttribute(name,value);element.getAttribute(name);查看全部
-
基本圖形 <rect>,<circle>,<ellipse>,<line>,<polyline><polygon> 基本屬性 fill:填充顏色, stroke：描邊途徑, stroke-width描邊大小, transform：變形 <rect> x，y:坐標 width，height:x,y軸上的長寬 rx,ry：圓角 <circle> cx,cy:圓的坐標（圓心） r:半徑 <ellipse> cx,cy:橢圓坐標（圓心） r:半徑 <line> x1,y1:一個點 x2,y2:另一個點 <polyline> points="x1 y1 x2 y2 x3 y3 x4 y4"查看全部
-
風雨兒 一、SVG簡介 使用XML描述的矢量文件 W3C標準（1.1）：http://www.w3.org/TR/SVG11/ 瀏覽器支持情況：http://caniuse.com/#cats=SVG 二、SVG使用方式： ① 瀏覽器直接打開 ② 在HTML中使用<img>標簽引用 ③ 直接在htm中使用SVG標簽 ④ 作為CSS背景查看全部
-
<svg width="400" height="300" viewBox="0,0,40,30" preserveAspectRatio="xMinYMin meet"></svg> 視窗：SVG 無限大 視野：viewBox 觀察區域 preserveAspectRatio meet: 讓viewBox等比例的同時，viewBox完全在SVG中顯示。viewBox大于SVG，等比例縮放。 slice: 保持viewBox比例，視野包含視窗，盡量填滿SVG。viewBox大于SVG，不縮放，按SVG大小剪切。 none: 不關心比例，viewBox直接拉伸到最大填滿viewport. 對齊方式：xMinYMin xMinYMid xMinYMax xMidYMin xMidYMid xMidYMax xMaxYMin xMaxYMid xMaxYMax查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 3-1 RGB和HSL 1、都是CSS3支持的顏色表示方法 1-1)RGB 1-1-1)紅色、綠色、藍色三個分量 1-1-2)表示方式: rgb(r, g, b) 或 #rrggbb 1-1-3)每個分量取值范圍: [0, 255] 1-1-4)優勢: 顯示器容易解析 1-1-5)劣勢: 不符合人類描述顏色的習慣, 例如需要調整一個圖像的顏色漸變, 需要調整3個參數進行 1-2)HSL 1-2-1)三個分量分別表示顏色、飽和度和亮度 1-2-2)格式: hsl(h, s%, l%) 1-2-3)取值范圍: h:[0, 359] s,l:[0, 100] 1-2-4)優勢: 符合人類描述顏色的習慣 1-3)透明度 1-3-1)rgba(r, g, b, a)和hsla(h, s%, l%, a) 表示帶透明度的顏色 1-3-2)opacity屬性表示元素的透明度 1-3-3)a和opacity的取值范圍: [0,1] 1-4)在SVG中應用顏色 1-4-1)<rect fill="rgb(255, 0, 0)" opacity="0.5"/> 1-4-2)<rect stroke="hsla(0, 50%, 60%, 0.5)" /> 2、互相轉換的原理 3、顏色搭配方案應用實例: http://paletton.com查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-5 坐標變換 1、坐標變換定義 1-1)數學上, [坐標變換]是采用一定的數學方法將一個坐標系的坐標變換為另一個坐標系的坐標的過程. 1-2)SVG中, [坐標變換]是對一個坐標系到另一個坐標系的變換的描述. 6、transform 屬性 6-1)前驅坐標系: 父容器的坐標系 6-2)transform 屬性: 定義前驅坐標系到自身坐標系的線性變換 6-3)語法: 6-3-1)rotate(<deg>)* 6-3-2)translate(<x>,<y>)* 6-3-3)scale(<sx>,<sy>)* 6-3-4)matrix(<a>,<b>,<c>,<d>,<e>,<f>)* 6-4) svg 中viewbox設置 .5 屬性使線條相對銳利查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-5 坐標變換 5、線性變換列表 5-1)表示一系列的變換, 結果為變換的矩陣的乘積 M = Mn·Mn-1·...·M2·M1·M0 5-2)后面的變換成在前面, 順序會影響最終結果 5-3)M(translate)·M(rotate) 1 0 10 cos(30°) -sin(30°) 0 0 1 10 · sin(30°) cos(30°) 0 0 0 1 0 0 1查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-5 坐標變換 4、縮放 4-1)a 和 c 直觀控制縮放 4-2)矩陣 2 0 0 0 2 0 0 0 1查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-5 坐標變換 3、旋轉 3-1)使用極坐標求變換矩陣 3-1-1)極坐標方程: X = r·cos(α) Y = r·sin(α) 3-1-2)旋轉θ度后: X' = r·cos(α+θ) Y' = r·sin(α+θ) 3-1-3)展開: X' = r·cos(α)cos(θ) - r·sin(α)sin(θ) = cos(θ)X - sin(θ)Y + 0 Y' = r·cos(α)sin(θ) + r·sin(α)sin(θ) = sin(θ)X + cos(θ)Y + 0 3-1-4)矩陣 cos(30°) -sin(30°) 0 sin(30°) cos(30°) 0 0 0 1查看全部
-
一、SVG簡介 使用XML描述的矢量文件 W3C標準（1.1）：http://www.w3.org/TR/SVG11/ 瀏覽器支持情況：http://caniuse.com/#cats=SVG 二、SVG使用方式： ① 瀏覽器直接打開 ② 在HTML中使用<img>標簽引用 ③ 直接在htm中使用SVG標簽 ④ 作為CSS背景查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-5 坐標變換 2、線性變換 2-1)線性變換方程 2-1-1)X' = aX + cY + e 2-1-2)Y' = bX + dY + f 2-2)變換矩陣, 記為 M a c e b d f 0 0 1查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-4 四個坐標系 1、用戶坐標系(User Coordinate) 1-1)即為世界的坐標系 1-2)即為原始坐標系, 為svg標簽坐標系, 其他坐標系都由用戶坐標系開始來產生的 2、自身坐標系(Current Coordinate) 2-1)每個圖形元素或分組獨立與生俱來的坐標系 3、前驅坐標系(Previous Coordinate) 3-1)即為父容器的坐標系 4、參考坐標系(Reference Coordinate) 4-1)使用其他坐標系來考究自身的情況時使用 4-2)即為任意一個坐標系, 選取一個參考坐標系是為了觀察圖形當中的某一個情況 4-3)想從另外一個坐標系來描述自身的屬性, 則該坐標系為描述的參考坐標系 5、坐標變換: 前驅坐標系經過了元素變換之后, 得到了元素的一個自身坐標系 5-1)transform="translate(50, 50)", 自身坐標系相對于前驅坐標系進行了坐標變換 6、所有的圖形, 關于它圖形自身描述的屬性都肯定是基于它自己的自身坐標系來進行定義的查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-3 坐標系統概述 1、svg中使用笛卡爾直角坐標系，為圖形提供一個統一定位基準 2、原點 3、互相垂直的兩條數軸, x軸水平向右, y軸垂直向下 4、角度定義, 角度的掃描方向為順時針向下, 由x軸正方向到y軸正方向, 稱為正角方向查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-2 圖形的分組 1、<g> 標簽來創建分組 2、子元素可繼承分組的屬性 3、可在分組中transform屬性來定義坐標變換 4、<g> 標簽可嵌套使用查看全部
-
【Author LightXun】 【引用請轉明出處】 【SVG】 2-1 視野的概念 1、視野與世界 1-1)SVG中的世界是無窮大的 1-2)繪制的矩形區域表示視野，是觀察世界的一個矩形區域 1-3)SVG視野(viewbox)控制視野 2、SVG的世界、視野、視窗的概念 2-1)width, height - 控制視窗 用來渲染SVG內容的區域 2-2)SVG代碼 - 定義世界 2-3)viewBox, preserveAspectRatio - 控制視野， 定義以多大的視野來觀察定義的世界 2-3-1)meet&slice: 控制世界與視野的關系與填充問題 2-3-2)meet:根據視野等比例縮放 2-3-3)slice:就這么大, 自己調整視野去看 2-3-4)viewBox:控制用來觀看SVG世界的視野大小 2-4)<svg xmlns="..." width="800" height="600" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet"></svg>查看全部
舉報
0/150
提交
取消