SVG实现镂空动画图标

<g id="icon-github">

<path d="M1,17.389c0,1.449,0.136,2.762,0.407,3.935c0.271,1.174,0.647,2.192,1.127,3.059s1.09,1.627,1.831,2.285

c0.741,0.657,1.544,1.194,2.41,1.612c0.866,0.416,1.854,0.756,2.965,1.017c1.111,0.261,2.245,0.443,3.403,0.548

C14.301,29.948,15.574,30,16.961,30c1.398,0,2.676-0.052,3.834-0.156c1.158-0.104,2.295-0.287,3.411-0.548

c1.116-0.261,2.11-0.601,2.981-1.017c0.871-0.418,1.68-0.954,2.425-1.612c0.746-0.657,1.361-1.419,1.846-2.285

s0.863-1.886,1.134-3.059c0.271-1.175,0.407-2.486,0.407-3.935c0-2.588-0.866-4.826-2.597-6.714c0.094-0.25,0.18-0.535,0.258-0.853

c0.078-0.318,0.151-0.772,0.219-1.361s0.042-1.27-0.078-2.042c-0.12-0.772-0.342-1.56-0.665-2.363l-0.235-0.047

c-0.167-0.031-0.441-0.023-0.822,0.024c-0.381,0.047-0.824,0.141-1.33,0.282s-1.158,0.412-1.956,0.814

c-0.798,0.402-1.64,0.905-2.527,1.51c-1.523-0.417-3.615-0.626-6.275-0.626c-2.65,0-4.736,0.209-6.259,0.626

c-0.887-0.605-1.734-1.108-2.543-1.51C7.381,4.727,6.736,4.456,6.256,4.315S5.328,4.083,4.91,4.041

C4.493,3.999,4.229,3.986,4.12,4.002C4.01,4.018,3.924,4.036,3.862,4.057C3.539,4.86,3.317,5.648,3.197,6.42

c-0.12,0.772-0.146,1.453-0.078,2.042C3.187,9.051,3.26,9.505,3.338,9.823c0.078,0.318,0.164,0.602,0.258,0.853

c-1.732,1.888-2.598,4.126-2.598,6.713H1z M4.928,21.314c0-1.502,0.683-2.879,2.05-4.131c0.407-0.375,0.881-0.66,1.424-0.853

c0.542-0.193,1.155-0.302,1.839-0.329c0.683-0.026,1.338-0.021,1.964,0.016s1.398,0.086,2.316,0.149s1.711,0.094,2.379,0.094

s1.46-0.031,2.378-0.094s1.69-0.112,2.316-0.149c0.626-0.037,1.28-0.042,1.964-0.016c0.683,0.026,1.296,0.136,1.839,0.329

c0.542,0.192,1.017,0.478,1.424,0.853c1.367,1.231,2.05,2.608,2.05,4.131c0,0.897-0.112,1.693-0.337,2.387

c-0.224,0.693-0.511,1.275-0.861,1.744c-0.349,0.47-0.834,0.869-1.455,1.197c-0.621,0.33-1.226,0.582-1.815,0.76

c-0.589,0.177-1.346,0.315-2.269,0.414c-0.923,0.1-1.747,0.16-2.472,0.181s-1.646,0.03-2.762,0.03c-1.116,0-2.037-0.01-2.762-0.03

c-0.725-0.021-1.549-0.081-2.472-0.181c-0.923-0.099-1.68-0.236-2.269-0.414s-1.194-0.43-1.815-0.76

c-0.621-0.328-1.106-0.728-1.455-1.197c-0.349-0.469-0.636-1.051-0.861-1.744c-0.224-0.694-0.336-1.489-0.336-2.387H4.928z M21,21

c0-1.657,0.895-3,2-3s2,1.343,2,3s-0.895,3-2,3S21,22.657,21,21z M9,21c0-1.657,0.895-3,2-3s2,1.343,2,3s-0.895,3-2,3

S9,22.657,9,21z"/>

</g>

 

</defs>

</svg>

 

<article class="article">

<svg class="icon-dribbble" viewBox="0 0 32 32"><use xlink:href="#icon-dribbble"></use></svg>

<svg class="icon-twitter" viewBox="0 0 32 32"><use xlink:href="#icon-twitter"></use></svg>

<svg class="icon-github" viewBox="0 0 32 32"><use xlink:href="#icon-github"></use></svg>

</article>