酷炫的SVG 动态图标
酷炫的SVG 動態圖標
? ? ? ?? ? ? ? ??? ? ? ? ? ?? ? ? ? ? ? ??? ? ? ? ? ? ??? ? ? ? ??
在 ?loading.io?上能看到好多效果驚艷的loading圖標。它們都是用svg寫成的，寥寥幾行代碼，比img圖片更精細更節省體積，比純dom實現要更靈活和高效。
怎么畫這些圓和方塊？怎么著色？怎么動起來？ 先看看svg的基礎知識，然后將上面第一個圖標畫出來。
?
一、基本圖形元素
svg有一些預定義的形狀元素：矩形<rect>，圓形<circle>，橢圓<ellipse>，直線<line>，折線<polyline>，多邊形<polygon>，路徑<path>和文本<text>。
1 <!-- viewBox定義畫布大小 width/height定義實際大小 -->2 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300">3 4 <!-- 直線 (x1,y1)與(x2,y2)為兩點坐標 -->5 <line x1="0" y1="0" x2="250" y2="30" />6 7 <!-- 多邊形 通過多個點的坐標形成封閉圖形 -->8 <polygon points="5,5 100,100 50,200" />9 10 <!-- 矩形 (x,y)為左上角起始點 --> 11 <rect x="100" y="100" width="120" height="100" /> 12 13 <!-- 圓形 (cx,cy)圓心點 r半徑 --> 14 <circle cx="100" cy="50" r="40" stroke="black"/> 15 16 <!-- 文本 (x,y)左下角坐標 --> 17 <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text> 18 19 </svg>
?
二、樣式與效果?
svg元素的樣式可以寫成標簽的屬性，也可以寫在style里面。下面是一些主要的樣式屬性：
- stroke：?筆觸顏色
- stroke-width：筆觸寬度
- stroke-opacity：筆觸的透明度
- fill：填充色，即background
- fill-opacity：填充色的透明度
- transform：圖形變換，類似css3 transform
svg還支持很多濾鏡效果，能做漸變、陰影、模糊、圖像混合等等。不需要了解那么多，例如要畫幾個彩色圓圈，用circle 配合fill 即可。
注意：transform 默認以svg左上角為基點，而不是圓心或其他中心。左上角是svg坐標系原點。了解transform和坐標系統，可以參考?這里。
?
三、輔助元素
svg有幾個輔助元素：<g> <defs> <symbol> <use>。它們不代表具體形狀，而是幫助進行圖形元素的分組管理、重復使用等。具體介紹可以參考?這里。
- <g> ?元素通常用來對相關圖形元素進行分組，以便統一操作，比如旋轉，縮放或者添加相關樣式等。
- <use> ?實現SVG現有圖形的重用，可以重用單個SVG圖形元素，也可以重用<g><defs>定義的組元素。
- <defs> ?內部定義的元素不會直接顯示，可以不用事先定義樣式，而是在使用<use>實例化的時候再定義。
- <symbol> ?能夠創建自己的視窗，兼具<g>的分組功能和<defs>初始不可見的特性。
對于上面提到的transform基點問題，可以通過嵌套<g>標簽并偏移<g>的位置，進而重設基點。如下畫出幾個水平排列的圓圈，并設置不同的縮放尺寸，得到
1 <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">2 <g transform="translate(20 50)">3 <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" />4 </g>5 <g transform="translate(40 50)">6 <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" />7 </g>8 <g transform="translate(60 50)">9 <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" /> 10 </g> 11 <g transform="translate(80 50)"> 12 <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" /> 13 </g> 14 </svg>
?
四、動畫的實現
svg的動畫效果是基于動畫標簽元素實現的：
<animate>實現單屬性的過渡效果，
<animateTransform>實現transform變換動畫效果，
<animateMotion>實現路徑動畫效果。
svg的寫法很靈活，樣式可以寫成標簽屬性也可以寫在style里面，動畫標簽可以通過xlink指定元素，也可以寫在動畫元素的內部。如下演示animateTransform的xlink寫法：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <svg?xmlns="http://www.w3.org/2000/svg"> ????<rect?id="animateObject" x="20" y="20" width="50" height="50" fill="blue"></rect> ????<animateTransform ????????xlink:href="#animateObject"?<!-- 指定動畫元素 --> ????????attributeName="transform"??<!-- 需要動畫的屬性名稱 --> ????????type="scale"??<!-- 指定transform屬性 --> ????????begin="0s"????<!-- 開始時間，即延遲 --> ????????dur="3s"??????<!-- 動畫時間 --> ????????from="1"??????<!-- 開始值 --> ????????to="2"????????<!-- 結束值 --> ????????repeatCount="indefinite"???<!-- 重復方式，indefinite無限重復? --> ????/> </svg> |
上例的動畫是A到B的過渡，要形成順暢的循環，至少要定義三個關鍵點。animateTransform支持更多更靈活的屬性設置：
- values：多個關鍵點的值，替代from和to，例如 values="0;1;0"?
- keyTimes：跟values對應，各個點的時間點
- calcMode：動畫快慢方式。
discrete?|?linear?|?paced?|?spline - keySplines：設置運動的貝塞爾控制點，calcMode為spline時有效
? 對svg動畫的更詳細介紹，參考?這里?。
五、代碼實例
? ? ?
circle畫圓，fill著色，用g標簽包裹并定位，transform設置初始形變，animateTransform設置動畫。現在來看代碼，相信不會再是一頭霧水了：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <svg?class="lds-message" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> ????<g?transform="translate(20 50)"> ????????<circle?cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)"> ????????????<animateTransform?attributeName="transform" type="scale" begin="-0.375s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform> ????????</circle> ????</g> ????<g?transform="translate(40 50)"> ????????<circle?cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)"> ????????????<animateTransform?attributeName="transform" type="scale" begin="-0.25s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform> ????????</circle> ????</g> ????<g?transform="translate(60 50)"> ????????<circle?cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)"> ????????????<animateTransform?attributeName="transform" type="scale" begin="-0.125s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform> ????????</circle> ????</g> ????<g?transform="translate(80 50)"> ????????<circle?cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)"> ????????????<animateTransform?attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform> ????????</circle> ????</g> </svg> |
?
也可以用js控制svg的屬性，控制svg的動畫過程，做成能響應點擊等事件的圖標按鈕。當然svg能做的遠不止圖標，這里有不少例子。
?
出處：https://www.cnblogs.com/yangshifu/p/9318434.html
轉載于:https://www.cnblogs.com/skzxcwebblogs/p/9389599.html
閱讀世界，共赴山海423全民讀書節，邀你共讀
總結
以上是生活随笔為你收集整理的酷炫的SVG 动态图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux网络模块全局变量,()不是Li
- 下一篇： WEB 服务器配置