-
基本圖形：<rect>,<circle>,<ellipse><line><polyline><polygon> 基本屬性：fill,stroke,stroke-width,transform查看全部
-
官方文檔查看全部
-
SVG 命名空間：http://www.w3.org/2000/svg var SVG_NS = "http://www.w3.org/2000/svg"; var shape = document.createElementNS( SVG_NS, 'svg' );查看全部
-
<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 參考資料 http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/查看全部
-
線性變換方程<br> X' = aX + cY + e<br> Y' = bX + dY + f<br> 變換矩陣<br> a c e<br> b d f<br> 0 0 1<br> <br> 例子-平移<br> 1 0 10<br> 0 1 10<br> 0 0 1<br> 每個坐標都加10<br> X' = 1*X + 0*Y + 10 = X + 10<br> Y' = 0*X + 1*Y + 10 = Y + 10<br> <br> 例子-旋轉<br> 極坐標<br> X = r * cos(α)<br> Y = r * sin(α)<br> 經過旋轉θ度后<br> X = r * cos(α+θ)<br> Y = r * sin(α+θ)<br> <br> X' = r*cos(α)cos(θ) - r*sin(α)sin(θ) = cos(θ)*X - sin(θ)*Y + 0<br> Y' = r*cos(α)sin(θ) + r*sin(α)cos(θ) = sin(θ)*X + cos(θ)*Y + 0<br> <br> 旋轉30度<br> cos(30) -sin(30) 0<br> sin(30) cos(30) 0<br> 0 0 1<br> <br> 縮放<br> a和c直觀控制<br> 2 0 0<br> 0 2 0<br> 0 0 1 注意：多次變換中，第一次變換基于前驅坐標系，而后變換基于自身坐標系查看全部
-
用戶坐標系（世界坐標系）User Coordinate<br> ：SVG所在的坐標系<br> 自身坐標系 Current Coordinate<br> ：圖形元素或分組獨立坐標系<br> 前驅坐標系 Previous Coordinate<br> ：父容器坐標系<br> 參考坐標系 Reference Coordinate<br> ：自身坐標系所參考的其他坐標系（例如：對齊）查看全部
-
貝塞爾曲線查看全部
-
svg：circle查看全部
-
svg：rect查看全部
-
svg:基本圖形和屬性查看全部
-
path命令查看全部
-
http://jsbin.com/lekob/5/edit 教程網站查看全部
-
SVG的世界、視野、視窗的概念查看全部
-
創建圖形的接口：document.createElementNS(ns,TagName) [SVG擁有獨立的namespace，故使用js創建元素時使用createElementNS（ns,TagName）接口] 添加圖形的接口：element.appendChile(childElement) 設置/獲取屬性：element.setAttribute(name,value) element.getAttribute(name)查看全部
-
rect、circle、line、polyline、polygon圖形的基本（共有）屬性： fill stroke stroke-width transform查看全部
舉報
0/150
提交
取消