如何用svg畫一個騷氣的名字
1. 前言
前端實現動畫 即使很炫的那種,說白了 各種 @keyframe a b c d 組合加上自己的創意,也不是很難,直到有一天看到一個 像蚯蚓一樣 描邊的 動畫,感覺挺不錯,後來發現是svg 做的,於是學習了下 svg的基礎知識,搞了了一個顯示自己名字的動畫
2. svg 在本文中需要的基礎知識
2.1 什麼是svg
引用w3c
- SVG 指可伸縮向量圖形 (Scalable Vector Graphics)
- SVG 用來定義用於網路的基於向量的圖形
- SVG 使用 XML 格式定義圖形
- SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失
- SVG 是全球資訊網聯盟的標準
- SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體
2.2 路徑
svg 中 定義 一個路徑 ,相當於 用挖掘機修一條路,之後我們就可以沿著這條路走完全程, 描邊動畫也就是沿著這個路徑進行
//大概長這樣
<path d="
M153 334
C153 334 151 334 151 334"
style="fill:white;stroke:red;stroke-width:2"/>
/>
複製程式碼d 用來描述路徑, style 就是 定義路徑的樣式, 不過和普通的html標籤有微微的區別,我當時是這樣來轉換的,一下就明白了
- fill => background-color
- stroke => border-color
- stroke-width => border-width
我們看到 d 中 有很多 大寫字母 M C,是什麼意思呢? 大寫字母代表 絕對定位, 小寫字母代表 相對定位
M = moveto 移動到
L = lineto 連線一根線到
H = horizontal lineto 水平連線
V = vertical lineto 垂直連線
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc 橢圓的線 貝塞爾曲線
Z = closepath 結束當前路徑
複製程式碼 標註的 是我們 需要用到的,瞭解了這些 我們可以 寫字了
3. 開始寫李金珂三個字
3.1 定義樣式
首先我們開始定義一個 svg 和 path 標籤
<body>
<svg>
<path></path>
</svg>
</body>
複製程式碼定義樣式
svg,
body,
html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
svg {
background: #ccc;
}
複製程式碼將svg設為全屏,背景色為灰色,分別設定三個字的顏色
path {
stroke-width: 3px;
stroke-linecap: round; //以圓滑的方式連線兩條線
fill: none; //不填充
}
path:nth-child(1) {
stroke: #396;
}
path:nth-child(2) {
stroke: gold;
}
path:nth-child(3) {
stroke: #06a;
}
複製程式碼3.2 開始繪製座標,寫 (李) 字
由於要寫三個字,為了外邊,我們全用大寫字母指令(絕對定位),運用剛才瞭解的知識, 將起始點 在x 50 y 50 下筆 然後 在 x120,y50 連線一根線 就可以看到 李 字 的 "一" 就出來了
<path d="M50 50 "/>
複製程式碼接下來我們來一點藝術範,寫帶點幅度的 "木" 字頭 首先用 A 在 "一" 上分 換一個 弧線 <A 半徑x,半徑y,0,大弧,終點x座標,終點y座標> 之後 用 "L" 寫兩撇
<path d="M50 50
L120 50
A15 2 0 1 0 110 30
L105 100
v -50
L 70 85
L141 70
L104 120"/>
複製程式碼效果如下,有一點點抽象派,需要有一點點藝術品位才能欣賞的來
剛開始有點生疏,不過之後找到了感覺,慢慢羅位子,終於一個李字 寫了出來
<path d="M50 50
L120 50
A15 2 0 1 0 110 30
L105 100
v -50
L 70 85
L141 70
L104 120
v 100
A 1 2 0 0 1 69 204
L31 167
L196 127"/>
複製程式碼果然字如其人,騷的一批,
3.3 寫完剩下 兩個字
之後就是依葫蘆畫瓢,寫下其餘的兩個字,程式碼如下
<svg>
<path d="M50 50
L120 50
A15 2 0 1 0 110 30
L105 100
v -50
L 70 85
L141 70
L104 120
v 100
A 1 2 0 0 1 69 204
L31 167
L196 127"/>
<path d="M500 50
L 410 136
M457 89
L 610 136
M 445 155
h 70
M 445 175
h 70
M 475 155
v 90
M 457 232
L 428 213
M 520 232
L 538 213
M 405 245
h 140"/>
<path d="M780 50
h 90
h -45
v 70
h -50
h 100
h -50
v 80
L 740 233
L 932 157
A 4 3 0 0 1 1036 96
L 980 130
v 30
h 30
v -25
h -30
h 30
v 150
L 945 222"/>
</svg>
複製程式碼效果如下
4. 新增動畫
其實 實現描邊動畫 就兩個關鍵屬性
stroke-dasharray：定義描邊的虛線長度，如果提供奇數個，則會自動複製該值成偶數
stroke-dashoffset：定義虛線描邊的偏移量（在路徑開始的前面，看不到）
複製程式碼將這兩個 值 設定為一樣的值,且相對大一點, 這時你會發現剛才辛辛苦苦寫的字看不見了
stroke-dashoffset: 2000;
stroke-dasharray: 2000;
複製程式碼將值改為0 就出來了,所以只需要一個動畫 將 值 緩慢的 改為0 就行了
path {
stroke-width: 3px;
stroke-linecap: round;
fill: none;
stroke-dashoffset: 2000;
stroke-dasharray: 2000;
animation: path 10s linear forwards;
}
@keyframes path {
to {
stroke-dashoffset: 0;
}
}
複製程式碼重新整理一下,大功告成
結語
其實有很多工具 可以線上生成 這種 svg,但是還是那句話,知其所以然 自己去折騰一下,會發現很多樂趣