例用CSS ANIMTION畫邊框

https://jsbin.com/huteruhopa/edit?html,css,output
上面例用CSS Animation做繪制邊框、填色動作
參考了CSS + SVG stroke 動態描繪 | 前端，沒有極限

SVG 研究之路 (6) - stroke 邊框 - OXXO.STUDIO

stroke-dasharray 虛線

Value: none | < dasharray> | inherit
stroke-dasharray - SVG | MDN

什麼是 dasharray?

stroke-dasharray是把stroke做成了是虛線的效果，線段會被拆成線段、空白、線段、空白
原本這句看不是很懂，但是從實側做一下
就是 線段長度{1} 空白{0,1}
當只有一個數字
線段、空白都會設為一樣長度(有點像margin、padding)
當然也可以設定不一樣
100 20 30 20
‘stroke-dasharray’ controls the pattern of dashes and gaps used to stroke paths. contains a list of comma and/or white space separated s and s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke-dasharray: 5,3,2 is equivalent to stroke-dasharray: 5,3,2,5,3,2.
Painting: Filling, Stroking and Marker Symbols – SVG 1.1 (Second Edition)

原理

好了，知道這樣還是沒法知道為什麼可以連線過去

stroke-dashoffset屬性是將上面的虛線推移，兩者會有以下幾點特性：
推移後，dasharray還是會保持循環。
dashoffset的值不會大於dasharray。
如果dashoffset 等於 dasharray，線段起始點會是空白。

這當出原理看不是很了解
原來線長度是dasharray把線段、空白設定一樣長度
然後對dashoffset做位移動作
例如：
svg裡的line 500
dasharray線段500空白500
當你做dashoffset
自然而然沒有線，不過dashoffset超過500以上就會跑出來了
!!!!等等那不是就沒法做到畫線方法!!!!
但只要再把dasharray跟dashoffset設定2000
只要大於你的邊線長度就沒有問題了
知道原理真的豁然開朗XD

https://jsbin.com/duhudisifi/edit?html,css,output
小小的改造成慢慢消失

vivus.js

在網路上爬到HTML5 SVG图形轮廓线条绘制动画插件-vivus_jQuery之家-自由分享jQuery、html5、css3的插件库
有中文翻譯…，果然有中文我才能吸收 orz

下面是一些你在使用SVG文件时需要注意的问题：

• SVG必须以内联的方式放置在HTML文件中，另外不能使用javascript来操控它。
• 所有的元素都必须有stroke属性而且不能填充图形。因为插件只是绘制图形的轮廓而不会去检查它的颜色。例如：fill: “none”; ，stroke: “#FFF”;。
• 你应该避免创建隐藏的SVG元素。Vivus会在执行动画前过滤掉一些不合格的元素。如果隐藏SVG没有被过滤掉，在执行路径动画时将会出现一些空白区域和缝隙。
• 不允许使用text元素，它们不能被转换为path元素。

TVアニメ「ノラと皇女と野良猫ハート」公式サイト
左上角的logo是用兩個svg作處理
我原本以為那個vivus.js有做填色效果….
結果後來發現有兩個svg orz

這兩個方法差別一個是用css，另一個是用js
但原理都相同…
所以把TVアニメ「ノラと皇女と野良猫ハート」公式サイト完整SVG
用到https://jsbin.com/huteruhopa/edit?html,css,output
改一下CSS的class .cls-2
哈 也是可以用XD

1
2
3
4
5

			var hi = new Vivus('hi-there', {duration:  500} ,function () {
					if (window.console) {
						console.log('Animation finished. [log triggered from callback]');
					}
				});

然後這篇文章我放著多天…
終於補完了…

參考來源：
https://maxwellito.github.io/vivus/
http://nora-anime.net/
CSS + SVG stroke 動態描繪 | 前端，沒有極限
SVG 研究之路 (6) - stroke 邊框 - OXXO.STUDIO
一个封装了vivus的vue组件，能够播放svg路径动画 - JavaScript开发社区 | CTOLib码库
10 个非常有用的 SVG 动画的 JavaScript 库 - 简书
Vivus js