诶，写什么？点赞才会多呢
一直都想自己画自己的头像，那就用svg画吧。
网上SVG的各方面教程真的太少了，连英文文献都很少。
前期准备
svg作画，光用代码是不行的，还得要一个svg编辑器。
- Inkscape
- vscode
- vscode插件：SVG 作者：jock
当然可以用其他的svg编辑器，AI什么之类，但Inkscape对svg免费且专注，就它挺好。（并且不能把注意力放编辑器上）。
这个vscode插件是为了最小化svg代码，Inkscape编辑之后有很多特定属性，造成干扰。
再找一个自己喜欢头像模样的图片。我找了这个。
创建svg
用vscode创建，用Inkscape打开，这样就让两个软件切换方便一点。
vscode传教文件，里面写上svg根节点，不然打不开：
<svg width="300mm" height="300mm" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<!-- 设置300 x 300（掘金图片找到的尺寸，单位可选mm，看起来大一些 -->
</svg>
开始画
目的：画出头发和脸蛋
将图片拖入（也可以粘贴）编辑器，调整一个合适的尺寸（不用较真，后面可以等比调整）。
用钢笔工具临摹，画出头发。
| 钢笔，改点工具 | 成果 |
|---|---|
右边是成果，是我好久才调出来的，要耐心，还要擅用这些改点工具。
临摹好了，在vscode中简化代码(vscode中右键菜单里)，可以取出一个path，然后编辑器就可以关了（这个编辑器会反复开关）。
<path
d="M98.95 147.61c20.152-1.322 41.485-3.915 62.432-28.643 11.643 6.854 21.716 24.903 42.11 23.013 22.034-35.255.948-69.85-7.59-77.12-4.723-4.02-14.94-1.292-18.852-3.55-5.934-3.426-10.772-11.14-17.873-11.262-7.1-.123-12.25 3.359-16.77 7.223-6.61-3.673-28.558-10.03-43.335 2.815-5.328 4.873-9.244 11.076-4.529 25.34-1.115 7.593-20.32 10.28-20.81 21.543-.49 11.263 2.888 14.843 20.075 27.666-4.207 5.695.236 13.298 5.141 12.976z" />
<!-- 记得清理一下属性 -->
添加渐变
添加一个 <defs> 标签，用来放一些svg样式，写出渐变，加上id，然后path的fill属性引入。
<svg width="300mm" height="300mm" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="linear_hair">
<!-- 默认从左到右 -->
<stop offset="0" stop-color="#ffd277" />
<stop offset="1" stop-color="#fe974b" />
</linearGradient>
</defs>
<path
d="M98.95 147.61c20.152-1.322 41.485-3.915 62.432-28.643 11.643 6.854 21.716 24.903 42.11 23.013 22.034-35.255.948-69.85-7.59-77.12-4.723-4.02-14.94-1.292-18.852-3.55-5.934-3.426-10.772-11.14-17.873-11.262-7.1-.123-12.25 3.359-16.77 7.223-6.61-3.673-28.558-10.03-43.335 2.815-5.328 4.873-9.244 11.076-4.529 25.34-1.115 7.593-20.32 10.28-20.81 21.543-.49 11.263 2.888 14.843 20.075 27.666-4.207 5.695.236 13.298 5.141 12.976z"
fill="url(#linear_hair)" fill-opacity="0.95" />
</svg>
// fill-opacity 是透明度
记得用浏览器打开，实时刷新查看
用filter加上阴影
这里是难点，这里要明白filter的叠加原理。（filter的主要标签很少，没有表面上那么多）
我在<defs>标签里加上一个filter，设置上id，让<path>引用
<filter id="fitler_hair">
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .95 0" result="hair" />
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .8 0" />
<feGaussianBlur stdDeviation="2" />
<feOffset in="one" dy="2.5" result="shadow" />
<feMerge result="base">
<feMergeNode in="shadow"></feMergeNode>
<feMergeNode in="hair"></feMergeNode>
</feMerge>
</filter>
<path d="..." filter="url(#fitler_hair)" />
filter核心原理：filter里面的每一个主要标签，都有入口(2个)出口三个属性in、in2、result，一般不会写全，因为我们用的是它的传递特性。
传递特性：如果in，result不写图像会往下传。第一个 filter primitive 会输入原始图像，最后一层会输出效果。 但我们不可能只用一个通道，像PS一样，我们可以分层，这就需要我们注意什么时候要提供result。
草案原文 - Filter Effects Module Level 1：If supplied, then graphics that result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same filter element. If no value is provided, the output will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its in attribute.
<filter id="fitler_hair">
// 这里的 filter primitive 会直接输入原始图像，不用设置 in
// feColorMatrix 是颜色转换，三个1的位置对应RGB，.95对应alpha通道，我单纯想调整下透明度
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .95 0" result="hair" />
// 这里result，是因为下面的合成 filer 要用。
// 这里的 filter primitive 会直接输入原始图像，因为result="hair"不会往下面传
<feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .8 0" />
<feGaussianBlur stdDeviation="2" /> // 模糊一下
<feOffset in="one" dy="2.5" result="shadow" /> // 准备传递给合成
// 这个就像图层管理，可以直接更改图层的顺序
<feMerge result="base"> // 这个 result="base" 本来是打算加一个波浪效果的
<feMergeNode in="shadow"></feMergeNode> // 阴影
<feMergeNode in="hair"></feMergeNode> // 原始图像，加了一点透明
</feMerge>
加上脸蛋
脸蛋同理，但是注意，copy一份文件，Ink编辑器去打开备份，因为我们只是用编辑器可视化编辑，然后取出编辑后的代码成果。效果如下：（这里的脸，直接用了头发的filter效果，脸的颜色直接填充的 #f2d8d4 ）
加上五官
先看效果：（额，还不如不加💔，但我尽力了）
这里每个五官都是先用Ink编辑器，画一个矩形，然后对象转路径，然后优化点。
注意的是，鼻子是用的创建书法，然后再逐个调整点。以下是代码。
<!-- 脸 -->
<path
d="M151.195 197.4c14.369.12 30.63-16.235 36.705-29.925 6.075-13.689 7.292-35.785 7.108-42.356-.185-6.57-5.155-30.117-19.882-35.775-16.868-6.48-42.524-8.214-55.778 4.928-11.733 11.634-14.2 25.16-14.359 34.315-.184 10.587 3.13 26.649 11.23 41.799 8.1 15.15 22.895 26.913 34.976 27.014z"
fill="#f2d8d4" filter="url(#fitler_hair)" stroke="rgba(201,181,175,0.288)" stroke-width="0.3" />
<!-- 眉毛 -->
<path
d="M163.848 122.332c5.148-1.333 17.392-.73 25.81 1.642 8.418 2.37.933 1.438-5.523.198-6.455-1.24-18.405-.59-22.5.293-4.094.884-2.935-.8 2.213-2.133z"
fill="#8a6d42" fill-opacity=".5" filter="url(#fitler_brow)" />
<!-- 眼睛 -->
<path
d="M124.838 137.563c7.119-1.243 7.995-1.267 15.891-.218 7.896 1.05 5.535 2.88-1.103 1.865s-7.398-.806-14.157.366c-6.76 1.172-7.75-.769-.631-2.012zm42.431-.733c6.903-1.332 7.68-1.595 15.724.403 8.045 1.999 6.539 3.789-.755 1.885-7.294-1.904-7.159-1.79-14.447-.364-7.289 1.426-7.426-.592-.522-1.924z"
fill="#80694f" fill-opacity=".7" />
<!-- 鼻子、嘴 -->
<path
d="M150.202 150.391c.016 1.12-.263 1.717-.553 2.807-.095.358-.232.702-.349 1.053-.7 1.909-1.618 3.484-2.803 5.09-.11.33-.747.628-.877.944-.26.629.467 1.217.833 1.592.561.534 1.235.687 1.795 1.225.574.45 1.386 1.128 2.262 2.378l2.53-.851c-1.172-1.464-1.002-1.165-2.05-2.272-1.048-1.107-1.358-1.363-1.94-1.872-.279-.28-.774-.382-.473-1.165 1.519-2.18 2.908-4.966 3.443-6.891.306-1.135.635-2.985.724-4.15zM156.572 176.191c6.88-.9 7.93.094 1.461 1.212-6.468 1.117-8.616.996-14.502.036-5.886-.96-3.453-1.74 1.257-1.212 4.71.53 4.904.864 11.784-.036z"
fill="#9e634c" fill-opacity=".6" filter="url(#fitler_nose)" />
<!-- 头发 -->
<path
d="M98.95 147.61c20.152-1.322 41.485-3.915 62.432-28.643 11.643 6.854 21.716 24.903 42.11 23.013 22.034-35.255.948-69.85-7.59-77.12-4.723-4.02-14.94-1.292-18.852-3.55-5.934-3.426-10.772-11.14-17.873-11.262-7.1-.123-12.25 3.359-16.77 7.223-6.61-3.673-28.558-10.03-43.335 2.815-5.328 4.873-9.244 11.076-4.529 25.34-1.115 7.593-20.32 10.28-20.81 21.543-.49 11.263 2.888 14.843 20.075 27.666-4.207 5.695.236 13.298 5.141 12.976z"
fill="url(#linear_hair)" filter="url(#fitler_hair)" fill-opacity="0.95" />
加一个耳机
我喜欢听歌，所以，加上耳机。找一张图片：
这里注意，除了耳机的连接架子用钢笔画出<path>，其它的4个块要手写rect，这样可以直接设置圆角。
然后注意旋转，两个耳机筛是需要旋转，旋转不是以自己为中心，而是以svg范围去设置中心旋转，手写很麻烦，就需要在编辑器里旋转（点击对象会切换 缩放/旋转）。下面是代码。
<!-- 耳机 -->
<rect fill-opacity=".95" x="208.896" y="110.938" width="15" height="25" fill="url(#linear_headset_shell)" rx="6"
ry="6" transform="rotate(4.273)" />
<rect fill-opacity=".95" x="76.727" y="132.557" width="15" height="25" fill="url(#linear_headset_shell)" rx="6"
ry="6" transform="rotate(-4.404)" />
<rect fill-opacity=".95" x="201.915" y="102.025" width="15" height="35" fill="url(#linear_headset_ear)" rx="7.5"
ry="7.5" transform="rotate(5.034)" />
<rect fill-opacity=".95" x="85.626" y="126.72" width="15" height="35" fill="url(#linear_headset_ear)" rx="7.5"
ry="7.5" transform="rotate(-3.948)" />
<!-- 耳机_支架 -->
<path
d="M94.155 124.865c-3.775-17.21.702-30.472 8.632-41.51 11.404-15.875 28.584-21.83 46.769-21.83 18.186 0 40.147 7.887 49.548 21.83 7.812 11.587 12.316 30.404 8.367 41.51l-5.093-2.811c1.973-11.806-1.158-25.91-8.533-35.921-8.667-11.764-28.729-19.052-44.289-19.052-15.56 0-35.44 7.854-42.112 19.052-6.672 11.199-10.966 19.218-7.898 35.92-1.461 1.579 1.059 0-5.391 2.812z"
fill="url(#linear_headset)" filter="url(#fitler_hair)" />
按照顺序，头发会覆盖耳机，耳机就几乎看不到了，所以之前我会在头发那加透明度，然后再头发后面再复制一遍耳机，加上透明度。结果如下：
这里我进行了<g>标签加组，然后缩放调整大小
<g transform="translate(-38.29 -3.759) scale(1.23507)">
...
</g>
加上乐符
这个就不用去临摹了，直接去阿里那下载icon，下载svg格式就好，拖入编辑器，调整颜色。如下：
代码如下：
<!-- 音乐 -->
<path
d="M244.288 54.128v17.396q0 .777-.528 1.382-.528.606-1.336.94-.807.334-1.607.497-.8.163-1.5.163-.698 0-1.498-.163t-1.608-.497q-.807-.334-1.335-.94-.528-.605-.528-1.382 0-.777.528-1.382.528-.606 1.335-.94.808-.334 1.608-.497.8-.163 1.499-.163 1.63 0 2.982.606v-8.341l-11.929 3.68V75.5q0 .777-.528 1.383-.528.605-1.336.94-.807.333-1.607.496-.8.163-1.5.163-.698 0-1.498-.163t-1.608-.497q-.807-.334-1.335-.94-.528-.605-.528-1.382 0-.776.528-1.382.528-.606 1.335-.94.808-.334 1.608-.497.8-.163 1.499-.163 1.63 0 2.982.606v-15.02q0-.481.295-.878.295-.396.761-.551l12.923-3.976q.187-.062.435-.062.621 0 1.056.435.435.434.435 1.056z"
fill="url(#linear_music)" class="scale1">
</path>
<path
d="M261.63 99.34v1.459a.579.579 0 01-.578.579h-1.158a.579.579 0 01-.578-.579v-.312a3.137 3.137 0 00-1.737-2.732c-.208-.116-.393-.255-.578-.382v10.417a4.375 4.375 0 01-4.63 4.005 4.375 4.375 0 01-4.63-4.051 4.375 4.375 0 014.63-4.051 4.965 4.965 0 012.315.567V91.54a.579.579 0 01.579-.58h1.157a.579.579 0 01.579.58v.196a3.09 3.09 0 001.655 2.801 5.347 5.347 0 012.974 4.804z"
fill="url(#linear_music)" class="scale2" />
对，你发现了class，因为下面的动画是用css写的
乐符跳动
动画，css写起来远比<animate>标签好用，所以加一个sty;e标签，写css就行
因为缩放是相对画布的，所以设置一下缩放中心，加上@keyframes动起来。以下静态图：
以下代码：
<style>
// 设置一下背景
svg.suni {
background-repeat: no-repeat;
background-image: linear-gradient(hsla(40, 85%, 95%, 0.9), hsla(40, 100%, 85%, 0.9));
background-color: hsla(40, 85%, 95%, 0.9);
}
.scale1 {
transform-origin: 50% 50%;
transform: scale(0.4);
animation: musicDance 8s ease infinite;
}
.scale2 {
transform-origin: 50% 50%;
transform: scale(0.4);
animation: musicDance 8s ease -5s infinite;
}
@keyframes musicDance {
0% {
transform: scale(0.4);
opacity: 0;
}
20% {
opacity: 1;
}
50% {
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1);
}
}
</style>
最后加上衣服
下载一个衣服icon，调整下。对了还要脖子，脖子的阴影用上了<radialGradient>
<radialGradient id="radial_neck" cx="50%" cy="20%" r="80%">
<stop offset="10%" stop-color="#c5b5b1" />
<stop offset="60%" stop-color="#f2d8d4" />
</radialGradient>
成果
mini源码：
<svg width="300mm" height="300mm" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" class="prefix__suni" style="background-repeat:no-repeat;background-image:linear-gradient(rgba(253,246,231,.9),rgba(255,229,179,.9));background-color:rgba(253,246,231,.9)"><defs><linearGradient id="prefix__linear_clothes"><stop offset="0" stop-color="#d6714f"/><stop offset="1" stop-color="#fe6e4b"/></linearGradient><linearGradient id="prefix__linear_music" x2="100%" y2="100%"><stop offset="0" stop-color="#ffe6b2"/><stop offset="1" stop-color="#6ffe25"/></linearGradient><linearGradient id="prefix__linear_headset_shell" x1="0" y1="0" x2="0" y2="100%"><stop offset="0" stop-color="#fe8500"/><stop offset="1" stop-color="#fd5a00"/></linearGradient><linearGradient id="prefix__linear_headset_ear" x1="0" y1="0" x2="0" y2="100%"><stop offset="0" stop-color="#fffed3"/><stop offset="1" stop-color="#ffe69d"/></linearGradient><linearGradient id="prefix__linear_headset" x1="0" y1="0" x2="0%" y2="100%"><stop offset="0" stop-color="#f55d04" stop-opacity=".8"/><stop offset=".7" stop-color="#ff5f02" stop-opacity=".8"/><stop offset="1" stop-color="#ff5f02" stop-opacity="0"/></linearGradient><linearGradient id="prefix__linear_hair"><stop offset="0" stop-color="#ffd277"/><stop offset="1" stop-color="#fe974b"/></linearGradient><filter id="prefix__fitler_hair"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .95 0" result="hair"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .8 0"/><feGaussianBlur stdDeviation="2"/><feOffset in="one" dy="2.5" result="shadow"/><feMerge result="base"><feMergeNode in="shadow"/><feMergeNode in="hair"/></feMerge></filter><filter id="prefix__fitler_brow" width="1.6" height="1.6"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .8 0"/><feGaussianBlur stdDeviation="2"/><feOffset in="one" dy=".4" result="shadow"/><feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge></filter><filter id="prefix__fitler_nose" width="1.6" height="2"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 .4 0"/><feGaussianBlur stdDeviation=".5"/><feOffset in="one" dx=".6" dy=".4" result="shadow"/><feMerge><feMergeNode in="shadow"/><feMergeNode in="SourceGraphic"/></feMerge></filter><radialGradient id="prefix__radial_neck" cx="50%" cy="20%" r="80%"><stop offset="10%" stop-color="#c5b5b1"/><stop offset="60%" stop-color="#f2d8d4"/></radialGradient></defs><g transform="translate(-38.29 -3.759) scale(1.23507)"><path fill="url(#prefix__radial_neck)" fill-opacity=".95" filter="url(#prefix__fitler_hair)" d="M137 180h30v45h-30z"/><path d="M151.195 197.4c14.369.12 30.63-16.235 36.705-29.925 6.075-13.689 7.292-35.785 7.108-42.356-.185-6.57-5.155-30.117-19.882-35.775-16.868-6.48-42.524-8.214-55.778 4.928-11.733 11.634-14.2 25.16-14.359 34.315-.184 10.587 3.13 26.649 11.23 41.799 8.1 15.15 22.895 26.913 34.976 27.014z" fill="#f2d8d4" filter="url(#prefix__fitler_hair)" stroke="rgba(201,181,175,0.288)" stroke-width=".3"/><path d="M163.848 122.332c5.148-1.333 17.392-.73 25.81 1.642 8.418 2.37.933 1.438-5.523.198-6.455-1.24-18.405-.59-22.5.293-4.094.884-2.935-.8 2.213-2.133z" fill="#8a6d42" fill-opacity=".5" filter="url(#prefix__fitler_brow)"/><path d="M124.838 137.563c7.119-1.243 7.995-1.267 15.891-.218 7.896 1.05 5.535 2.88-1.103 1.865s-7.398-.806-14.157.366c-6.76 1.172-7.75-.769-.631-2.012zm42.431-.733c6.903-1.332 7.68-1.595 15.724.403 8.045 1.999 6.539 3.789-.755 1.885-7.294-1.904-7.159-1.79-14.447-.364-7.289 1.426-7.426-.592-.522-1.924z" fill="#80694f" fill-opacity=".7"/><path d="M150.202 150.391c.016 1.12-.263 1.717-.553 2.807-.095.358-.232.702-.349 1.053-.7 1.909-1.618 3.484-2.803 5.09-.11.33-.747.628-.877.944-.26.629.467 1.217.833 1.592.561.534 1.235.687 1.795 1.225.574.45 1.386 1.128 2.262 2.378l2.53-.851c-1.172-1.464-1.002-1.165-2.05-2.272-1.048-1.107-1.358-1.363-1.94-1.872-.279-.28-.774-.382-.473-1.165 1.519-2.18 2.908-4.966 3.443-6.891.306-1.135.635-2.985.724-4.15zm6.37 25.8c6.88-.9 7.93.094 1.461 1.212-6.468 1.117-8.616.996-14.502.036-5.886-.96-3.453-1.74 1.257-1.212 4.71.53 4.904.864 11.784-.036z" fill="#9e634c" fill-opacity=".6" filter="url(#prefix__fitler_nose)"/><rect fill-opacity=".95" x="208.896" y="110.938" width="15" height="25" fill="url(#prefix__linear_headset_shell)" rx="6" ry="6" transform="rotate(4.273)"/><rect fill-opacity=".95" x="76.727" y="132.557" width="15" height="25" fill="url(#prefix__linear_headset_shell)" rx="6" ry="6" transform="rotate(-4.404)"/><rect fill-opacity=".95" x="201.915" y="102.025" width="15" height="35" fill="url(#prefix__linear_headset_ear)" rx="7.5" ry="7.5" transform="rotate(5.034)"/><rect fill-opacity=".95" x="85.626" y="126.72" width="15" height="35" fill="url(#prefix__linear_headset_ear)" rx="7.5" ry="7.5" transform="rotate(-3.948)"/><path d="M98.95 147.61c20.152-1.322 41.485-3.915 62.432-28.643 11.643 6.854 21.716 24.903 42.11 23.013 22.034-35.255.948-69.85-7.59-77.12-4.723-4.02-14.94-1.292-18.852-3.55-5.934-3.426-10.772-11.14-17.873-11.262-7.1-.123-12.25 3.359-16.77 7.223-6.61-3.673-28.558-10.03-43.335 2.815-5.328 4.873-9.244 11.076-4.529 25.34-1.115 7.593-20.32 10.28-20.81 21.543-.49 11.263 2.888 14.843 20.075 27.666-4.207 5.695.236 13.298 5.141 12.976z" fill="url(#prefix__linear_hair)" filter="url(#prefix__fitler_hair)" fill-opacity=".95"/><path d="M94.155 124.865c-3.775-17.21.702-30.472 8.632-41.51 11.404-15.875 28.584-21.83 46.769-21.83 18.186 0 40.147 7.887 49.548 21.83 7.812 11.587 12.316 30.404 8.367 41.51l-5.093-2.811c1.973-11.806-1.158-25.91-8.533-35.921-8.667-11.764-28.729-19.052-44.289-19.052-15.56 0-35.44 7.854-42.112 19.052-6.672 11.199-10.966 19.218-7.898 35.92-1.461 1.579 1.059 0-5.391 2.812z" fill="url(#prefix__linear_headset)" filter="url(#prefix__fitler_hair)"/><rect fill-opacity=".1" x="208.896" y="110.938" width="15" height="25" fill="url(#prefix__linear_headset_shell)" rx="6" ry="6" transform="rotate(4.273)"/><rect fill-opacity=".1" x="76.727" y="132.557" width="15" height="25" fill="url(#prefix__linear_headset_shell)" rx="6" ry="6" transform="rotate(-4.404)"/><rect fill-opacity=".4" x="201.915" y="102.025" width="15" height="35" fill="url(#prefix__linear_headset_ear)" rx="7.5" ry="7.5" transform="rotate(5.034)"/><rect fill-opacity=".4" x="85.626" y="126.72" width="15" height="35" fill="url(#prefix__linear_headset_ear)" rx="7.5" ry="7.5" transform="rotate(-3.948)"/></g><path d="M244.288 54.128v17.396q0 .777-.528 1.382-.528.606-1.336.94-.807.334-1.607.497-.8.163-1.5.163-.698 0-1.498-.163t-1.608-.497q-.807-.334-1.335-.94-.528-.605-.528-1.382 0-.777.528-1.382.528-.606 1.335-.94.808-.334 1.608-.497.8-.163 1.499-.163 1.63 0 2.982.606v-8.341l-11.929 3.68V75.5q0 .777-.528 1.383-.528.605-1.336.94-.807.333-1.607.496-.8.163-1.5.163-.698 0-1.498-.163t-1.608-.497q-.807-.334-1.335-.94-.528-.605-.528-1.382 0-.776.528-1.382.528-.606 1.335-.94.808-.334 1.608-.497.8-.163 1.499-.163 1.63 0 2.982.606v-15.02q0-.481.295-.878.295-.396.761-.551l12.923-3.976q.187-.062.435-.062.621 0 1.056.435.435.434.435 1.056z" fill="url(#prefix__linear_music)" style="transform-origin:50% 50%;animation:musicDance 8s ease infinite" transform="scale(.4)"/><path d="M261.63 99.34v1.459a.579.579 0 01-.578.579h-1.158a.579.579 0 01-.578-.579v-.312a3.137 3.137 0 00-1.737-2.732c-.208-.116-.393-.255-.578-.382v10.417a4.375 4.375 0 01-4.63 4.005 4.375 4.375 0 01-4.63-4.051 4.375 4.375 0 014.63-4.051 4.965 4.965 0 012.315.567V91.54a.579.579 0 01.579-.58h1.157a.579.579 0 01.579.58v.196a3.09 3.09 0 001.655 2.801 5.347 5.347 0 012.974 4.804z" fill="url(#prefix__linear_music)" style="transform-origin:50% 50%;animation:musicDance 8s ease -5s infinite" transform="scale(.4)"/><path d="M223.8 265.509c-9.045-4.554-54.802-18.2-55.138-18.2a.728.728 0 00-.73.694c-.369 8.964-8.508 14.763-17.6 14.763-9.091 0-19.014-5.495-19.383-14.458a.728.728 0 00-.73-.694c-6.335 0-33.499 7.342-48.884 13.167-15.041 4.102-29.213 28.63-27.189 46.873 26.31 16.867 201.427 34.163 191.394-6.888-5.308-13.965-11.928-30.317-21.739-35.257z" fill="url(#prefix__linear_clothes)"/><style>@keyframes musicDance{0%{transform:scale(.4);opacity:0}20%{opacity:1}50%{transform:scale(1)}to{opacity:0;transform:scale(1)}}</style></svg>
总结
- svg编辑器要灵活运用
- 记得filter传递特性
- 动画用css写
- 要耐心
求三连~
本来是想换个新头像的，但缩略图怎么这么丑呢？等以后再改改吧。
