資訊專欄INFORMATION COLUMN
摘要：基本的文檔由根元素和基本形狀元素構成作為的一種方言，必須正確的綁定命名空間在屬性中綁定。另外，命令不用區分大小寫三次貝塞爾曲線或分別是起點終點控制點。不過，可以實現其功能與效果，因此，此屬性已經被廢棄?？芍^因為兄弟相爭而年少隕落的天王。
原文鏈接：http://hangyangws.win/2017/04...基礎認知
本文不能讓你成為 SVG 大神，但是能讓你知道、了解他「揭開神秘面紗」
SVG「Scalable Vector Graphics」表示「可縮放矢量圖形『放大不模糊』」面向未來「W3C 標準」。
基本的 SVG 文檔由 根元素和 基本形狀元素 構成
作為 XML 的一種方言，SVG 必須正確的綁定命名空間（在 xmlns 屬性中綁定）。命名空間速成 獲取更多信息
SVG 文件全局有效的規則是 「后來居上」，越后面的元素越可見。
動畫、圖形、漸變、旋轉、濾鏡、JavaScript 接口、各種超酷的動畫…
和 HTML 使用的幾種方式
不能使用JS來控制
.svg { background-image: url(xxx.svg);}
最好不使用 base64 格式化 SVG「阻塞其它資源」、不能使用 JS 控制
能使用JS來控制「推薦方式」
節省 HTTP 請求，能使用 JS 控制，不能被瀏覽器緩存
看圖說話「原點在左上角」：
viewBox demo
動畫理解：
深度閱讀 - viewBox
CSS、JS 與 SVG 內斂樣式 外鏈樣式JS 操作 SVG
如果 SVG 代碼作為 DOM 在 HTML 內部，可以向平常一樣操作 DOM 操作 SVG
如果是使用 你可以使用 contentDocument 來控制它 SVG
注意
調用
…
SVG 形狀元素來張圖壓壓驚：
點我查看 SVG 元素的基本 DEMO
別說話，先舉個 ? ，一起感受一下 path：點我
基于 path 的不同屬性，可以畫出各種各樣的路徑，所以 path 可算是 SVG 的「節點之王」
除了 path 之外的節點都「比較普通」，可以看成是對 path 的封裝，比如「Rect、Circle…」
命令
命令都用一個關鍵字母來表示，命令 都有兩種 表示方式
大寫字母，表示采用「絕對定位」
小寫字母，表示采用「相對定位『相對于上一個點』」
path 的命令列表document.getElementById(‘path’).getTotalLength() 得到路徑長度
M：moveto 移動到
L：lineto 畫線到；H：horizontal lineto 水平線到；V：vertical lineto 垂直線到
L 命令將會在當前位置和新位置之間畫一條線段：L x y (or l dx dy)
還有兩個簡寫命令：H，繪制平行線。V，繪制垂直線。這兩個命令都只帶一個參數，標明在 x 或 y 軸移動到的位置：H x (or h dx) 、V y (or v dy)
Z：closepath 關閉路徑
Z 命令會從當前點畫一條直線到路徑的起點，所以它還是經常被放到路徑的最后。另外，Z 命令不用區分大小寫：Z (or z)
C：curveto 三次貝塞爾曲線
C x1 y1, x2 y2, x y 或 c dx1 dy1, dx2 dy2, dx dy
(x1, y1)、(x2, y2) 分別是起點、終點控制點。最后一個坐標 (x, y)，表示曲線的終點
三次貝塞爾曲線 表現形式 是：曲線沿著 起點開始 到第一控制點的方向伸出，逐漸彎曲，然后沿著第二控制點到 終點的方向結束
S：smooth curveto 光滑三次貝塞爾曲線
S 命令可以用來創建與之前那些曲線一樣的貝塞爾曲線，通常和 C 命令一起使用
如果 S 命令跟在一個 C 命令或者另一個 S 命令的后面，它的第一個控制點，就會被假設成前一個控制點的對稱點，不應該寫出來，所以 S 省略了一個對稱點
Q：quadratic Belzier curve 二次貝塞爾曲線
Q x1 y1, x y 或 q dx1 dy1, dx dy
T：smooth quadratic Belzier curveto 光滑二次貝塞爾曲線
T x y 或 t dx dy
T 命令類似于 S 命令，用于二次貝塞爾曲線。T 命令前面最好是一個 Q 命令，或者是另一個 T 命令
如果 T 多帶帶使用，那么控制點就會被認為和終點是同一個點，所以畫出來的將是一條直線
A：elliptical Arc 橢圓弧
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
rx ry：「橢圓」的 x，y半徑
x-axis-rotation：X 軸旋轉角度，順時針為正數
large-arc-flag：1 表示用大弧度，0 表示小弧度
sweep-flag：弧度回話方向，1 順時針，0 逆時針
x y：弧度終點
stroke
fill
transform
linearGradient
mask
filter
clipPath
一些 Demo：
svg 模糊 demo
symbol demo
symbol-use-demo
text mask demo
mask demo
clip demo
SVG 文字路徑動畫
linearGradient Demo
使用 CSS 請注意
把 background-color、border 改成 fill 和 stroke
上色和填充的部分一般是可以用 CSS 來設置的，比如 fill，stroke，stroke-dasharray，但不包括漸變和圖案等。
另外，width、height，以及路徑的命令等等，都不能用 css 設置
不是所有的屬性都能用 CSS 來設置：SVG 規范 將屬性區分成 properties 和 attributes，前者是可以用 CSS 設置的，后者不能
SVG 動畫 集合
SVG 的動畫元素是和 SMIL Synchronized Multimedia Integration Language開發組合作開發的。
SMIL 開發組和 SVG 開發組合作開發了 SMIL 動畫規范，在規范中制定了一個基本的 XML 動畫特征集合。
SVG 吸收了 SMIL 動畫規范當中的動畫優點，并提供了一些SVG繼承實現。
大概三種實現方式：
JS 動畫「DOM 操作『忽視它』」
CSS3 動畫「animation、transition『不是 svg 的重點』」
SVG 本身的動畫「基于 SMIL」「主要借助 SVG animate 相關標簽」
setset 表示此元素沒有動畫效果 ???。
好吧：這樣的，雖然 set 雖然不能觸發連續的動畫，但是，其還是可以實現基本的延遲功能。
就是指：可以在特定時間之后修改某個屬性值「也可以是 CSS 屬性值」。
一個 Demo
animateSVG animation 最強大的地方在于：「只要在頁面放幾個 animate 元素，沒有任何 CSS, 沒有任何JS」
一個 Demo
animateColor一看就知道是顏色動畫。不過，animate 可以實現其功能與效果，因此，此屬性已經被廢棄。
可謂因為兄弟相爭而年少隕落的天王。逝者已矣，過去的就讓它過去吧 ~~~
一個 Demo
animateMotionanimateMotion 元素可以讓 SVG 各種圖形沿著特定的 path 路徑運動 ~~~
一個 Demo
例子分析組合：
一個 Demo
end 事件：
一個 Demo
click 事件：
一個 Demo
貝塞爾曲線原理「簡單闡述」
工具推薦svgo
項目地址：點我查看
比較厲害的壓縮優化 SVG 的工具，可以將 SVG 中的無用信息刪掉，同時支持代碼進行壓縮
SVGOMG
展示地址：SVGOMG - SVGO"s Missing GUI
SVGOMG 是 svgo 的可視化界面工具，操作起來很方便，還提供了一些其他有用的功能
Snap.svg
項目地址：Snap.svg - Home
Snap.svg 是一個可以使你操縱 SVG 資源和 jQuery 操作 DOM 一樣簡單的類庫，
可以寫出更加復雜的 SVG 效果，同時文檔超級齊全，推薦給想深入了解的同學。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/51562.html
大家好，我們每天全網搜集各行各業的研究報告，了解一個行業從閱讀這個行業的研報開始，今日分享目錄如下： 20211006分享目錄： 2021抖音電商商家經營方法論白皮書-34頁.pdf 2021中國數據智能產業發展研究報告-50頁.pdf 2021公益數字化轉型-56頁.pdf 2021年中國一線城市出行平臺調研報告-77頁.pdf 2021年中國內容機構（MCN）行業發展研究報告-66頁.pd...
閱讀 2470·2021-09-28 09:36
閱讀 3613·2021-09-22 15:41
閱讀 4423·2021-09-04 16:45
閱讀 2018·2019-08-30 15:55
閱讀 2854·2019-08-30 13:49
閱讀 834·2019-08-29 16:34
閱讀 2380·2019-08-29 12:57
閱讀 1691·2019-08-26 18:42
