如何用svg畫一個騷氣的名字

時間 2019-11-07

標籤如何 svg 一個名字简体版

原文原文鏈接

1. 前言

前端實現動畫即便很炫的那種,說白了各類 @keyframe a b c d 組合加上本身的創意,也不是很難,直到有一天看到一個像蚯蚓同樣描邊的動畫,感受挺不錯,後來發現是svg 作的,因而學習了下 svg的基礎知識,搞了了一個顯示本身名字的動畫css

2. svg 在本文中須要的基礎知識

2.1 什麼是svg

引用w3c

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用於網絡的基於矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失
SVG 是萬維網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

2.2 路徑

svg 中定義一個路徑 ,至關於用挖掘機修一條路,以後咱們就能夠沿着這條路走徹底程, 描邊動畫也就是沿着這個路徑進行html

//大概長這樣
<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,是什麼意思呢? 大寫字母表明絕對定位, 小寫字母表明相對定位bash

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 標籤svg

<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" 寫兩撇spa

<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;
      }
    }
複製代碼