資訊專欄INFORMATION COLUMN
摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。
1、 svg知識掃盲 svg簡介
SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。
SVG1.1 于 2003 年 1 月 14 日成為 W3C 推薦標準。
SVG本質上是用XML語言描述的，所以它可以和DOM結構一樣被CSS和JS編程控制，通過連續地改變SVG圖形屬性就可以創建SVG動畫。
SVG可用文本編輯器編輯，也可通過Adobe Illustator等專業編輯軟件處理。
SVG文件可多帶帶使用，使用XML定義并包含DTD聲明：
在現代瀏覽器中，我們可以直接在HTML代碼中嵌入SVG代碼：
即
viewport 即用x, y, width, height定義的頁面矩形區域
viewbox 定義用戶視野的位置和大小，如 viewBox ="20 20 100 100" 定義了起始坐標為(20, 20)，寬高為100的矩形區域，演示地址
preserveAspectRatio 保持橫縱比，當viewport和viewbox 長寬比不一致時，該屬性可以控制2者的對齊和裁剪情況，演示地址
用法基本圖形元素[ ] align: xMid xMin xMax 和 YMid YMin YMax 自由組合 e.g. preserveAspectRatio = "xMidYMid meet"
svg繪制基本圖形元素，只要明確好各個參數的含義，應該很簡單，老鐵們快速過一遍：
矩形，rx，ry定義圓角其他常用標簽元素圓 cx cy 定義圓心 橢圓 rx ry 定義長軸半徑、短軸半徑 線段 折線 點與點之間用空格隔開 多邊形 路徑，可以繪制上述所有圖形 d屬性定義路徑的具體形式 文字 dx dy是相對起點坐標的偏移量，rotate指定單個文字的旋轉 示例文字
主要有
可以參考這個 codepen 演示 來理解。
2、svg動畫why svg？如果你問我為什么用svg做動畫，而不是其他技術，那可以告訴你以下幾點：
svg本質上是一種圖形繪制技術，廣泛用于web矢量圖繪制，適用于多數商業logo，卡通圖片制作。因此高清屏幕使用svg可避免模糊現象。（與此相關，canvas則是用來繪制點陣圖（或者說位圖），兩者是相對的）
基于不規則path的動畫效果，如路徑描邊（path draw），路徑變體（path morph），沿路徑運動（path move）等，這是目前其他技術不太容易處理的。
除了path，svg也支持漸變、裁切、遮罩等特性，在其他技術遇到瓶頸時，不妨考慮svg。這里是一個用到大量svg技術的網站 welikesmall，可以參考里面的效果實現。
輕量，且兼容性好。svg于2003年已成為web標準，通常幾十行svg代碼就可解決特定的需求。svg在未來也有著可觀的發展前景。
SVG + SMIL 實現動畫SMIL 動畫 Demo
基于SMIL標準，可以直接借助svg animate標簽實現動畫。
目前SMIL動畫多數都可以用css3來代替，但要讓某個物體沿著特定路徑移動，css3就無能為力了（除了chrome46新增的motion-path）。
遺憾的是，SMIL標準正逐漸衰落，并不會成為未來世界的主流，它正逐漸被css3所代替，所以我們只需簡單了解svg中的SMIL特性即可。
set 元素可以在特定時間后，瞬間修改圖形元素的某個屬性值，它不是動畫，是一種突變。
animate元素定義在圖形元素里面，它可以改變圖形某一個屬性的值，需要指定起始值和結束值（from to）以及持續時間（dur）
animateMotion它可以引用一個事先定義好的動畫路徑，用
類似于css transform，它可以改變圖形的transform屬性，e.g. rotate | translate | scale | skewX | skewY
svg + css3 或 svg + js 實現動畫snap.svg 動畫 Demo
通過css或js修改svg圖形的屬性也可實現動畫，這種方式也是目前最常用的。這就涉及到其他的知識點了，css3的transform，transition，animation等，js的setInterval和requestAnimationFrame。除了用原生代碼控制，我們當然也可以用業界已經成熟的動畫庫來操作屬性：
anime.js （15kb左右，github 20k star, 最輕量，推薦使用）
velocity.js (50kb左右，不依賴jq，號稱比css動畫快)
snap.svg.js (svg中的jQuery，專業操作svg，80kb左右)
GreenSock (100kb左右，動畫功能齊全，部分插件收費)
// animejs api
var animation= anime({
targets: "#svg-path", // 目標元素，支持css選擇器，dom，dom數組等
opacity: "0", 要變化的屬性，這里是opacity屬性，可以是任何css或svg屬性
duration: 3000,
delay: 1000,
easing: "easeInOutQuart",
loop: true,
direction: "reverse", // 動畫方向：逆向播放
complete: function(anim) {
}
});
常見的圖形屬性如下所示：
fill 定義填充顏色
fill-opacity 定義填充透明度
stroke 邊框顏色
stroke-width
stroke-opacity
stroke-linecap 單條線端點樣式 butt | round | square
stroke-dasharray 定義虛線樣式，間隔定義實線和空白的長度，如 10 5 5 10
stroke-dashoffset 設置虛線描邊偏移量，使圖案向前移動
opacity
font-size | font-weight | font-family | font-style | text-decoration 同CSS
transform | transform-origin 同CSS
rotate svg獨有，定義 單個文字 的旋轉角
d 路徑的描述屬性
3、相關工具網站由于svg技術過于強大，此文章只是拋磚引玉，更多精髓等待大家發掘：
method draw | 在線制作svg圖片
svgo | 強大的svg壓縮工具
svg trick | 一個研究svg技術的網站
vivus | 制作svg路徑動畫的js庫
snap.svg.js | svg中的jquery
snap.svg中文文檔
鑫空間，鑫生活 | 博主對svg和css研究很深
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103103.html
摘要：知識掃盲簡介，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來創建矢量圖。于年月日成為推薦標準。動畫如果你問我為什么用做動畫，而不是其他技術，那可以告訴你以下幾點本質上是一種圖形繪制技術，廣泛用于矢量圖繪制，適用于多數商業，卡通圖片制作。 1、 svg知識掃盲 svg簡介 SVG(Scalable Vector Graphics)，可縮放矢量圖形，具有放大縮小不失真的特性，可以用來...
摘要：光滑三次貝塞爾曲線指令跟在指令或指令后面補刀，它會自動在基礎上生成一個對稱點，所以指令只需要兩個點就可以。二次貝塞爾曲線是控制點，表示的是曲線的終點。 一、內置圖形: rect(矩形) circle(圓) ellipse(橢圓) line(直線) polyline(折線) polygon(多邊形) path(路徑) 二、內置圖形的html屬性或(css樣...
摘要：建議直接用同學給的編輯器打開后直接引用，因為貝塞爾曲線真的不是隨便就能住的。。。 最近在做首頁動畫的時候，引入有背景色的mp4動圖時，動圖的背景色不能很好的融入相同背景色的不同瀏覽器和不同顯示器，出現了下圖這種尷尬的情況： showImg(https://segmentfault.com/img/bVbn6au?w=500&h=446); 動圖的邊界始終有根分界線，即使調整了背景色適應...
摘要：建議直接用同學給的編輯器打開后直接引用，因為貝塞爾曲線真的不是隨便就能住的。。。 最近在做首頁動畫的時候，引入有背景色的mp4動圖時，動圖的背景色不能很好的融入相同背景色的不同瀏覽器和不同顯示器，出現了下圖這種尷尬的情況： showImg(https://segmentfault.com/img/bVbn6au?w=500&h=446); 動圖的邊界始終有根分界線，即使調整了背景色適應...
閱讀 1572·2021-11-25 09:43
閱讀 2476·2019-08-30 15:54
閱讀 2938·2019-08-30 15:53
閱讀 1087·2019-08-30 15:53
閱讀 747·2019-08-30 15:52
閱讀 2538·2019-08-26 13:36
閱讀 807·2019-08-26 12:16
閱讀 1210·2019-08-26 12:13
