如何用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          结束当前路径
复制代码

标注的是咱们须要用到的,了解了这些咱们能够写字了markdown

3. 开始写李金珂三个字

3.1 定义样式

首先咱们开始定义一个 svg 和 path 标签网络

<body>
<svg>
    <path></path>
</svg>
</body>
复制代码

定义样式svg

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,可是仍是那句话,知其因此然本身去折腾一下,会发现不少乐趣