领导：阿仁，有个很重要的任务需要你去执行。
阿仁：什么任务这么重要？
领导：最近我们有个新园区开张，还请了一个写手写了篇软文来炒作，《云破月来花弄影-SVG多种技术组合实现》，可惜这个写手除了长得帅，文章一点都不好，根本没有阅读量，所以决定派你卧底去这个园区，打探一下。
阿仁：这个园区有啥问题吗，是有黑帮在那里做交易，还是有境外势力在那边有基地？
领导：比这些重要。主要是园区人气太差，希望你假扮一个游客，帮忙了解下其他游客的想法，另外多说说我们园区的好处，鼓动游客参与，活跃气氛。
阿仁：领导，这个工作其实不叫卧底，有个更熟悉的名字
领导：是吗，啥名字？
阿仁：线上这个叫水军，线下叫托儿...
领导：你不愿意去？
阿仁：领导，我堂堂计算机专业毕业，干这个...
领导：请你用十条理由来说服所有的程序员，PHP是世界上最好的语言。
阿仁：领导，你这个园区叫啥名字？
领导：叫SVG园区。

1、啤酒节霓虹灯

阿仁经过一番乔装打扮（主要是换掉了格子衫，背了斜肩的挎包），来到了SVG园区。巧的很，一眼就看到了园区的霓虹灯牌子，正在举办啤酒节。

啤酒节霓虹灯的代码是这样的

<style>
        body {
            background: #1d2b29;
            width: 100vw;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        .svg-beerglass {
            animation: flicker 4.1s infinite;
        }

        @keyframes flicker {
            0% {
                opacity: 0;
            }

            49% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
    <svg width="2000px" height="670px">
        <defs>
            <filter id="beerbottleblur" x="-100%" y="-100%" width="300%" height="300%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
            </filter>
            <svg id="beerbottle" t="1565578109000" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7275" width="128" height="128">
                <path stroke="#29ABE2" stroke-width="25"
                    d="M571.907998 79.770028H452.090002c-10.226 0-17.731999-9.612-15.25-19.532l5.874-23.499999a27.725999 27.725999 0 0 1 26.897999-21.001999h84.771998c12.724 0 23.813999 8.66 26.897999 21.001999l5.874 23.499999c2.482 9.92-5.022 19.531999-15.248 19.532z"
                    fill="none" p-id="7276"></path>
                <path stroke="#009D00" stroke-width="25"
                    d="M591.767998 1008.268h-159.539996c-35.515999 0-64.308998-28.789999-64.308998-64.307998V530.552014a521.779985 521.779985 0 0 1 48.024999-218.658993l0.002-0.002A521.769985 521.769985 0 0 0 463.970001 93.234027V79.768028h96.049998v13.463999a521.797985 521.797985 0 0 0 48.025998 218.660994 521.783985 521.783985 0 0 1 48.026999 218.660993v413.407988c0.002 35.515999-28.788999 64.305998-64.304998 64.305998z"
                    fill="none" p-id="7277"></path>
                <path stroke="#00CA65" stroke-width="25"
                    d="M607.025997 311.893021c-31.639999-68.551998-47.207999-143.155996-47.207998-218.659994V80.607028H511.56v12.623999c0 75.504998 16.618 150.108996 48.257999 218.660994 31.639999 68.551998 48.257999 143.156996 48.257998 218.660993V943.960002c0 35.515999-28.815999 64.031998-64.333998 64.031998h48.025999c35.515999 0 62.466998-28.515999 62.466998-64.031998V530.554014c0-75.501998-15.569-150.106996-47.208999-218.659993z"
                    fill="none" p-id="7278"></path>
                <path stroke="#008442" stroke-width="25"
                    d="M416.094003 311.893021c31.639999-68.551998 47.207999-143.155996 47.207998-218.659994V80.607028h48.257999v12.623999c0 75.504998-15.568 150.108996-47.207999 218.660994s-47.207999 143.156996-47.207998 218.660993V943.960002c0 35.515999 27.591999 64.031998 63.109998 64.031998h-48.025999c-35.515999 0-63.339998-28.515999-63.339998-64.031998V530.554014c-0.003-75.501998 15.566-150.106996 47.205999-218.659993z"
                    fill="none" p-id="7279"></path>
                <path stroke="#29ABE2" stroke-width="25"
                    d="M592.039998 271.871022H431.954002l16.01-80.041998h128.067996zM367.927004 832.167006h288.159992v48.025998h-288.159992z"
                    fill="none" p-id="7280"></path>
                <path stroke="#FFFFFF" stroke-width="25" d="M367.927004 608.064012h288.159992V832.190006h-288.159992z"
                    fill="none" p-id="7281"></path>
                <path stroke="#C7B299" stroke-width="25"
                    d="M431.964002 608.064012a80.043998 80.043998 0 1 0 160.087996 0 80.043998 80.043998 0 1 0-160.087996 0z"
                    fill="none" p-id="7282"></path>
                <path stroke="#29ABE2" stroke-width="25"
                    d="M367.927004 560.038014h64.034998v48.025998h-64.034998z m224.124994 0h64.034998v48.025998h-64.034998zM479.990001 608.064012a32.017999 32.017999 0 1 0 64.035998 0 32.017999 32.017999 0 1 0-64.035998 0z"
                    fill="none" p-id="7283"></path>
                <path stroke="#29ABE2" stroke-width="25"
                    d="M511.998 655.807011c-26.331999 0-47.753999-21.422999-47.753999-47.754999s21.421999-47.753999 47.753999-47.753998 47.753999 21.421999 47.753999 47.753998-21.423999 47.754999-47.753999 47.754999z m0-64.034998c-8.978 0-16.282 7.304-16.282 16.281999s7.304 16.282 16.282 16.282 16.282-7.304 16.282-16.282-7.306-16.282-16.282-16.281999zM417.150003 768.805007h190.929994v31.472H417.150003z m29.373999-48.257998h130.083996v31.471999H446.524002z"
                    fill="none" p-id="7284"></path>
                <path stroke="#C7B299" stroke-width="25"
                    d="M479.990001 271.880022a32.017999 32.017999 0 1 0 64.035998 0 32.017999 32.017999 0 1 0-64.035998 0z"
                    fill="none" p-id="7285"></path>
                <path stroke="white" stroke-width="10"
                    d="M622.335997 305.301021c-30.187999-65.411998-46.251999-137.993996-46.547999-210.042994A31.217999 31.217999 0 0 0 596.699998 83.410028a31.269999 31.269999 0 0 0 5.723999-26.988l-5.873999-23.499999A43.399999 43.399999 0 0 0 554.383999 0.00003h-84.771998a43.397999 43.397999 0 0 0-42.163999 32.919999l-5.873999 23.499999a31.255999 31.255999 0 0 0 5.723999 26.988 31.213999 31.213999 0 0 0 20.914 11.847999c-0.296 72.049998-16.362 144.636996-46.549999 210.042994-32.366999 70.125998-49.474999 148.018996-49.474998 225.250993v413.407988c0 44.135999 35.908999 80.041998 80.042997 80.041998h159.539996c44.135999 0 80.042998-35.905999 80.042997-80.041998V530.554014c-0.002-77.235998-17.109999-155.128995-49.476998-225.252993z m-65.017998-48.447999c-6.312-18.991999-24.235999-32.735999-45.319999-32.735999s-39.007999 13.74-45.319999 32.735999h-12.585999a543.389984 543.389984 0 0 0 12.987999-48.257998h89.837998a543.759984 543.759984 0 0 0 12.987999 48.257998h-12.587999z m-29.039999 15.018c0 8.976-7.304 16.282-16.282 16.282s-16.282-7.304-16.282-16.282 7.304-16.282 16.282-16.281999c8.978 0.002 16.282 7.308 16.282 16.281999z m16.015999-176.362995c0.12 27.259999 2.404 54.586998 6.698 81.616998h-77.985998c4.292-27.031999 6.58-54.356998 6.7-81.616998h64.587998z m-74.681998-64.035998h84.771998a11.974 11.974 0 0 1 11.633999 9.082l5.93 23.475999-0.038 0.002h-119.799996l5.87-23.477999a11.972 11.972 0 0 1 11.631999-9.082z m-39.377999 287.014992c4.57-9.902 8.8-19.973999 12.756-30.159999h24.175999c6.718 18.249999 24.279999 31.299999 44.829999 31.299999 20.551999 0 38.111999-13.05 44.829999-31.299999H580.999998a529.687984 529.687984 0 0 0 12.756 30.161999c30.471999 66.019998 46.575999 139.352996 46.575998 212.066993V544.300014h-56.943998c-17.549999-19.635999-43.049999-32.025999-71.397998-32.025999s-53.845998 12.39-71.397998 32.025999h-56.943998v-13.748c0.01-72.709998 16.116-146.041996 46.585998-212.064993zM383.658004 817.060006V624.030012h33.919999c7.63 45.232999 47.051999 79.802998 94.419997 79.802997s86.789997-34.573999 94.419997-79.802997h33.919999v193.029994h-256.679992z m256.679992 31.471999v14.688h-256.679992v-14.688h256.679992zM417.490003 592.556013h-33.833999V575.770013h38.173999a95.157997 95.157997 0 0 0-4.34 16.786z m30.199999 15.497999c0-35.457999 28.847999-64.305998 64.305998-64.305998s64.305998 28.847999 64.305998 64.305998-28.847999 64.306998-64.305998 64.306998-64.305998-28.847999-64.305998-64.306998z m158.813995-15.497999a94.769997 94.769997 0 0 0-4.342-16.786h38.173999v16.786h-33.831999z m-14.735999 399.975988h-159.539996c-26.781999 0-48.569999-21.789999-48.569998-48.569999v-49.268998h256.679992v49.268998c0 26.779999-21.789999 48.569999-48.569998 48.569999z"
                    fill="none" p-id="7286"></path>
            </svg>
            <svg id="beerglass" t="1565581315581" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="8508" width="70" height="70">
                <path
                    d="M804.352 406.016l-82.432 0-48.64 0 0 473.6-97.792 0L575.488 408.064c-17.408 11.776-14.848 19.968-36.864 23.552l0 447.488L435.2 879.104 435.2 430.08c-19.968-4.608-20.992-12.8-36.864-24.064l0 473.6L294.4 879.616 294.4 406.016 250.88 406.016l0 445.952c0 45.568 36.864 82.432 82.432 82.432l304.128 0c45.568 0 86.528-36.864 86.528-82.432l0-64 80.384 0c36.352 0 66.048-29.696 66.048-66.048L870.4 472.064C870.4 435.712 841.216 406.016 804.352 406.016zM825.856 742.912l-101.888 0L723.968 450.048l101.888 0L825.856 742.912z"
                    p-id="8509" fill="#60B9EE"></path>
                <path class="svg-beerglass"
                    d="M485.376 403.456c-39.424 0-75.776-16.384-102.4-45.056-19.968 14.336-43.52 22.016-68.096 22.016-53.248 0-99.84-36.352-112.64-87.552-16.896-12.8-26.624-32.768-26.624-54.272 0-37.888 30.72-69.12 69.12-69.12 1.024 0 2.048 0 3.072 0 16.896-12.288 36.352-19.456 56.32-21.504 14.848-32.768 47.616-54.784 83.968-54.784 27.136 0 52.736 11.776 70.144 32.256 18.944-4.096 36.352-4.096 55.808 0.512 17.408-20.48 43.008-32.768 70.656-32.768 35.328 0 67.584 20.48 82.944 52.224 60.928 4.096 109.056 54.272 109.056 116.224 0 64-52.224 116.224-116.224 116.224-25.088 0-49.152-8.192-69.12-23.04C564.224 385.536 525.824 403.456 485.376 403.456zM386.56 319.488l8.704 11.776c22.016 28.672 54.784 45.056 90.112 45.056 36.352 0 71.168-17.92 92.672-48.128l9.216-12.8 11.264 10.752c16.896 16.384 38.912 25.088 61.952 25.088 49.152 0 89.6-39.936 89.6-89.6 0-49.152-39.936-89.088-89.088-89.6-0.512 0-1.024 0-2.048 0l-9.728 0-3.072-9.216c-9.728-25.6-34.304-43.008-61.44-43.008-21.504 0-41.984 10.752-54.272 28.672l-5.632 7.68-9.216-2.56c-21.504-6.144-38.4-6.144-59.392-0.512l-9.216 2.56L441.856 148.48c-12.288-17.408-32.256-28.16-53.76-28.16-28.16 0-52.736 17.92-61.952 45.056L323.072 174.08l-9.216 0c-19.456 0.512-37.888 7.168-53.76 19.968l-4.608 3.584-7.68-1.024c-1.024 0-2.048-0.512-3.072-0.512-23.04 0-41.984 18.944-41.984 41.984 0 14.336 7.168 27.136 18.944 35.328l4.608 3.072 1.024 5.632C236.032 323.584 272.896 353.28 314.88 353.28c22.528 0 44.032-8.704 60.416-24.064L386.56 319.488z"
                    p-id="8510" fill="#60B9EE"></path>
                <path
                    style="fill:#60b9ee;fill-opacity:1;stroke:#60b9ee;stroke-width:38.5823288;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    d="m 250.87999,406.01599 h 470.1288" id="path1387" inkscape:connector-curvature="0" />
            </svg>
            <g id="beerbottleneon">
                <use xlink:href="#beerbottle" filter="url(#beerbottleblur)" />
                <use xlink:href="#beerbottle" opacity="0.9" />
            </g>
            <g id="beerbottleneon1">
                <use xlink:href="#beerbottleneon">
                    <animateTransform attributeName="transform" id="f1" attributeType='XML' begin='0s;t1.end' dur='2s'
                        type="rotate" from="0 0 0" to="0 0 0" />
                    <animateTransform attributeName="transform" id="s1" attributeType='XML' begin='f1.end' dur='0.1s'
                        type="rotate" from="0 64 64" to="70 64 64" />
                    <animateTransform attributeName="transform" id="t1" attributeType='XML' begin='s1.end' dur='2s'
                        type="rotate" from="70 64 64" to="70 64 64" />
                </use>
            </g>
            <g id="beerglassneon">
                <use xlink:href="#beerglass" filter="url(#beerbottleblur)" />
                <use xlink:href="#beerglass" opacity="0.5" />
            </g>
            <path id="beerpath" d="M -20.501285,20 A 97.750643,50 0 0 0 175,20" />
            <text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25">
                <textPath xlink:href="#beerpath" startOffset="40">SVG园区啤酒节</textPath>
            </text>
            <g id="beerdayneon">
                <use xlink:href="#beerday" filter="url(#beerbottleblur)" />
                <use xlink:href="#beerday" opacity="0.9" />
            </g>
            <circle id="beercircleback" r="110"  fill="black" />
            <circle id="beercircle" r="110" stroke="#31FF98" stroke-width="8" fill="none" >
                    <animate attributeName="stroke" id="f2" begin="0s;t2.end" from="#FFFFFF" to="#A8A8FF" dur="2s" />
                    <animate attributeName="stroke" id="s2" begin="f2.end" from="#A8A8FF" to="#FFFF00" dur="2s" />
                    <animate attributeName="stroke" id="t2" begin="s2.end" from="#FFFF00" to="#FFFFFF" dur="2s" />
            </circle>        
            <g id="beercircleneon">
                <use xlink:href="#beercircle" filter="url(#beerbottleblur)" />
                <use xlink:href="#beercircle" opacity="0.9" />
            </g>
            <g id="beerdayboard">
                <use xlink:href="#beercircleback" x="110" y="110" />
                <use xlink:href="#beerbottleneon1" x="10" y="20" />
                <use xlink:href="#beerglassneon" x="110" y="78" />
                <use xlink:href="#beerdayneon" x="30" y="120" />
                <use xlink:href="#beercircleneon" x="110" y="110" />
            </g>
        </defs>
        <use xlink:href="#beerdayboard" x="10" y="10"/>
    </svg>

对于做霓虹灯的文章，大家可以看我之前的文章《堕落糜烂的光芒-CSS+SVG实现霓虹灯效果》和《亮瞎你的氪金眼-CSS+SVG实现霓虹灯动画》，这里主要讲之前没有用过一些知识点。

css动画效果，通过opacity让啤酒瓶突然消失
@keyframes flicker {
            0% {
                opacity: 0;
            }

            49% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 1;
            }
        }

......
svg动画效果，通过rotate让啤酒瓶突然倾斜70度
<animateTransform attributeName="transform" id="f1" attributeType='XML' begin='0s;t1.end' dur='2s'
                        type="rotate" from="0 0 0" to="0 0 0" />
                    <animateTransform attributeName="transform" id="s1" attributeType='XML' begin='f1.end' dur='0.1s'
                        type="rotate" from="0 64 64" to="70 64 64" />
                    <animateTransform attributeName="transform" id="t1" attributeType='XML' begin='s1.end' dur='2s'
                        type="rotate" from="70 64 64" to="70 64 64" />

一般css动画和svg动画都是平滑运动的，但为了展现霓虹灯瞬间切换的效果，我设置了在关键帧突然切换，所以在49%的时候还没有变化，而在50%的时候突然显示，再配合svg的动画效果，在某个时间点快速的旋转一个角度，就造成了啤酒瓶突然切换倒酒的霓虹灯效果。啤酒杯的泡沫出现和消失的原理也是一样的。

“SVG园区啤酒节”则是使用了svg里面的“textPath”

<path id="beerpath" d="M -20.501285,20 A 97.750643,50 0 0 0 175,20" />

先画好一个path，它的实际样子是这样的

“SVG园区啤酒节”就会沿着它的路径排列好，不过排列是从左上角开始的，所以我们用startOffset参数来调整文字起始的位置，最终调整好的代码是

<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25">
                <textPath xlink:href="#beerpath" startOffset="40">SVG园区啤酒节</textPath>
            </text>

调整位置还有一种方法，就是修改text的坐标，给text的x设置一个数值也能够调整文字的位置

<text id="beerday" fill-opacity="0.4" stroke="white" stroke-width="1" fill="none" font-size="25" x="40">
                <textPath xlink:href="#beerpath" >SVG园区啤酒节</textPath>
            </text>

这块单独的效果，可以在这里在线看到：请看

2、WC标识

阿仁为了完成领导的任务，带头喝起了啤酒，炒热了游客的气氛，在啤酒节气氛达到最高潮的时候，阿仁突然感觉到了啤酒的反扑，尿意汹涌的铺了上来，远处正好有堵墙，上面写着WC的标志，阿仁扶着墙踉跄的走了过去。

为了做旧，我把WC做了了处理，让标识显的残破，代码如下：

<svg id="wc" t="1565534122398" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5989" width="32" height="32">
                <path stroke="black" stroke-width="25" stroke-dasharray="910,324"
                    d="M326.8 408.7c-22.1 79.5-44.2 159-66.2 238.6-16.4 59.3-16.3 59.3-83.6 54.6C143.9 577.3 110.4 451.4 75.9 322h62.4c23.5 103.4 47.1 206.8 72.4 318.2 21.7-82 41.5-156.9 61.3-231.9 3.2-12 5.9-24 9-36 14.5-55.6 14.5-55.6 78.6-50.3 27.7 104.2 55.7 209.8 86.4 325.6 22.1-100.7 41.5-190.7 61.7-280.5 11.3-50.6 11.8-50.5 71.3-44.3-33.6 126.6-66.9 252.3-100 377-61.1 9.4-61 9.3-75.5-44.8-22-82.1-44.3-164.1-66.4-246.1-3.4 0-6.8-0.1-10.3-0.2zM170 278.5h-53.6c0-46.7-3.7-92.5 1.1-137.4 4.3-39.7 41.2-69.9 81.3-75.9 15.8-2.4 32.1-3.1 48.1-3.2 180.8-0.2 361.7-0.3 542.5-0.1 99 0.2 134.1 35.7 134.1 134.4v82.1h-57.1c0-31.9 0.5-62.5-0.1-93-0.9-47.1-16.4-63.7-62-63.8-190.7-0.4-381.5-0.4-572.2 0-45.5 0.1-61.2 17-62 63.8-0.5 29.6-0.1 59.2-0.1 93.1zM112.9 745.1H170c0 31.9-0.4 62.5 0.1 93 0.8 46.8 16.5 63.8 62 63.9 190.7 0.4 381.5 0.4 572.2 0 45.6-0.1 61-16.7 62.2-63.8 0.7-28.4 0.9-56.9 1.4-85.3 0-1.2 0.7-2.3 2.1-6.4h50.1c0 45.3 3.6 91.1-1.1 136-4.1 39.4-41 69.8-81.4 75.9-17.1 2.6-34.5 3.2-51.8 3.2-178.3 0.2-356.7 0.3-535 0.1-103.9-0.1-137.8-34.3-137.8-138.2-0.1-25.7-0.1-51.4-0.1-78.4zM898.7 569.2c17.5 4.3 33.8 8.3 49.7 12.1-0.4 59.4-46.1 111.1-109.8 122.9-69.4 12.9-136.4 4.5-183.4-52.5-54.9-66.7-58.1-145.2-30.2-224.9 24.4-69.7 86.5-111.7 163.1-113.3 73.7-1.6 131.3 37.8 162 114.1-17.4 4.9-34.3 9.7-53.3 15-3.4-5.6-7-10.2-9.3-15.4-17.7-40.5-49.7-62.6-92.7-63.2-45.9-0.7-80.6 23-101.2 63.9-27 53.7-29.5 109.2-6.7 165.2 18.2 44.9 57.7 73 102.2 73.4 45.3 0.4 81.7-26.5 100.5-74.5 2.6-6.6 5.3-13.3 9.1-22.8z"
                    p-id="5990" fill="none"></path>
            </svg>

主要是用stroke-dasharray，具体的看这里

另外一个残破的对象是那个手指的标识，为了体现没固定好，在风中摇摆的样子，用了动画效果，代码如下：

<use id="finger" xlink:href="#finger">
                    <animateTransform attributeName="transform" id="first1" begin="0s;second1.end" dur="0.5s"
                        type="rotate" from="80" to="100"></animateTransform>
                    <animateTransform attributeName="transform" id="second1" begin="first1.end" dur="0.8s" type="rotate"
                        from="100" to="80"></animateTransform>
                </use>

这个用的animateTransform。在svg的动画里面，核心是三剑客：animate,animateTransform和animateMotion；

animate主要用于元素数值属性的变化，比如width,height和颜色啥的
animateTransform主要用于元素变换属性的变化，主要和Transform属性搭配，做一些放大缩小，斜切旋转的变化，这个例子就是用于旋转（rotate）的
animateMotion主要做路径变化，下面有案例会详细讲。

3、尿意浓

阿仁被WC的标志搞糊涂了，不知道这个手指箭头的意思，看着这个晃悠的指向地面的手指，他恍然大悟，原来这是个露天厕所，指示牌的意思是让他就在这里解决，下体的告急已经不容他多想，他解开了拉链...

这个其实我最先想的是用之前在《天边一朵云-徒手用html生成一朵云，很真的那种》里面用到的filter组合，feTurbulence+feDisplacementMap，它们通过噪点，扭曲变形来改变图形，但是效果嘛，一言难尽啊。这是原始的尿路图：

是我在inkscap工具里一挥而就的，一看就是有生活经验的人画出来的，这个弧度，这个波浪感，没有几十年站着尿尿的经验怎么可能做到。然后就用filter加animate效果做出来了第一版

<filter id="filter-suibian" width="350%" height="250%" x="-100%" y="-100%">
                    <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="1" seed="1" />
                    <feDisplacementMap in="SourceGraphic" scale="0">
                        <animate attributeName="scale" id="first2" begin="0s;second2.end" from="5" to="15" dur="0.5s">
                        </animate>
                        <animate attributeName="scale" id="second2" begin="first2.end" from="15" to="5" dur="1s"></animate>
                    </feDisplacementMap>
                </filter>
...
        <use xlink:href="#suibian" filter="url(#filter-suibian)"/>

最终效果如下：

这个效果相当的诡异，看的久了，感觉我还是需要去广州男子医院去一趟，解决下泌尿科的问题，在下半身的强烈不适下，我放弃了，决定上第二版。

<filter id="shock2">
                <feTurbulence type="fractalNoise" baseFrequency="0.1" numOctaves="1" seed="2" result="noise" id="noise">
                    <animate attributeType="XML" attributeName="seed" from="2" to="120" dur="10s"
                        repeatCount="indefinite" />
                </feTurbulence>
                <feMorphology id="morph3" in="SourceGraphic" operator="dilate" radius="1" result="morph1" />
                <feMorphology id="morph4" in="morph1" operator="erode" radius="1" result="morph2" />
                <feComposite operator="out" in="morph2" in2="morph1" result="strokeText" />
                <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="strokeText" in2="noise"
                    result="displacementMap" color-interpolation-filters="auto" scale="10" />
                <feGaussianBlur stdDeviation="1" result="coloredBlur" />
                <feMerge>
                    <feMergeNode in="coloredBlur" />
                    <feMergeNode in="displacementMap" />
                </feMerge>
            </filter>
<filter id="blur-suibian">
                <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
            </filter>
            <g id="suibian1">
                <use xlink:href="#suibian" width="310"  filter="url(#blur-suibian)" />
            </g>
<use xlink:href="#suibian1" filter="url(#shock2)" />

这个filter的组合，其实不是用在这里的，大家看过我《亮瞎你的氪金眼-CSS+SVG实现霓虹灯动画》文章的人就知道，这个filter是用来做霓虹灯效果的，我再加上一些高斯模糊（feGaussianBlur ），尝试了一下（呸呸，没有尝试）。不试不知道，试过后嘛....

感觉这个至少没有泌尿科的问题，但阿仁的啤酒一定喝的很多，量有点大啊。

4、苍蝇爬呀爬

阿仁终于畅快了，但这不文明的举动也引起了周围环境的变动，一只对骚味很敏感的苍蝇来到了这边，陶醉在这个气味中（是青岛的还是纯生的？）

之前讲过的animateMotion终于要用上了，为了让animateMotion出场，我特地配了只苍蝇，我容易吗？

这是我用inkscap随手画的路线图，再配上一只小小的苍蝇-------就是这只----->，很小哦

<g id="fly">
                <image xlink:href="fly.png" filter="url(#shadow)" width="8">
                    <animateMotion
                        path="m -54.38608,206.12261 34.03516,7.36844 38.94745,-3.50878 48.070278,-12.63161 26.315844,-21.40355 35.438668,18.24565 47.7194,-14.38599 43.50886,-31.22814 9.82459,-23.15794 -6.31581,-16.84214 -17.54389,-7.01756 -22.10531,0.70176 -9.82458,21.40355 -8.42107,23.50882 -35.78955,1.75439 -23.50883,-14.73687 -34.035154,16.49126 -29.824624,28.42111 -46.3158872,20.7018 -25.9649658,-14.38599 -16.491265,12.28072 z"
                        dur="10s" rotate="auto" repeatCount="indefinite" />
                </image>
            </g>

这里的path就是上图中画的曲曲折折的图形的svg源码，配合animateMotion就能让苍蝇沿着path的路径走，注意rotate参数，如果不设置成auto的话，苍蝇图片只是沿着path平移，非常的假，看起来是这样的。

这种会倒车的苍蝇显然不是地球上的生物，很容易让阿仁怀疑这里是外星生物的基地，为了打消阿仁的疑心，我决定加上rotate属性。加了rotate=auto就不一样了，图片会沿着path的路径自动调整角度，加了后的效果是这样的

这就显得真实多了。

5、三影

阿仁其实来之前，仔细阅读了那篇《云破月来花弄影-SVG多种技术组合实现》的文章，为了证明他来过，他把流水对准了那棵花...

里故事：上一篇文章说过，云破月来花弄影的作者张先有个外号叫“张三影”。为了致敬他，我凑上了花的影子，阿仁的影子和啤酒瓶的影子，这也是三影...

花影的代码：

<image id="huazhi" xlink:href="huazhi.png" width="100">
                <animateTransform attributeName="transform" id="first" begin="0s;third.end" dur="0.5s" type="rotate"
                    from="0 73 199" to="-5 73 199"></animateTransform>
                <animateTransform attributeName="transform" id="second" begin="first.end" dur="0.2s" type="rotate"
                    from="-5 73 199" to="-7 73 199"></animateTransform>
                <animateTransform attributeName="transform" id="third" begin="second.end" dur="0.4s" type="rotate"
                    from="-7 73 199" to="0 73 199"></animateTransform>
            </image>
            <use id="huazhiyin" xlink:href="#huazhi" filter="url(#huazhishadow)" transform="skewX(29)" />

<use xlink:href="#huazhiyin" x="-225" y="390" />

背影的代码：

<image xlink:href="by.png" x="140" y="368" width="150" filter="url(#blur-moon)" transform="skewX(10)" />

啤酒瓶影子的代码（酒瓶是用svg画的，不是png图）

<svg id="jiupin" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"
                xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"
                xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm"
                viewBox="0 0 210 297" version="1.1" id="svg5721" inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
                sodipodi:docname="jiuping.svg">
                <defs id="defs5715" />
                <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0"
                    inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="-112.85714"
                    inkscape:cy="560" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"
                    inkscape:window-width="1920" inkscape:window-height="1000" inkscape:window-x="-11"
                    inkscape:window-y="-11" inkscape:window-maximized="1" />
                <metadata id="metadata5718">
                    <rdf:RDF>
                        <cc:Work rdf:about="">
                            <dc:format>image/svg+xml</dc:format>
                            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                            <dc:title></dc:title>
                        </cc:Work>
                    </rdf:RDF>
                </metadata>
                <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
                    <path style="fill:#000000;stroke-width:0.12662637" inkscape:connector-curvature="0"
                        d="m 96.940112,135.10889 c -1.332179,-1.77624 -4.440595,-4.4406 -6.660894,-5.77278 -2.220298,-1.33218 -3.108418,-4.88465 -3.108418,-5.77277 0,-0.88812 0.44406,-4.4406 0.44406,-6.21684 0,-1.77623 -1.332178,-5.32871 -1.332178,-6.66089 -0.44406,-0.88812 -0.888119,-3.99654 -0.888119,-6.21683 0,0 1.332179,0.44405 1.332179,-1.33218 V 91.146988 c 0,0 0.444058,-0.88812 -1.332179,-1.332179 -1.776239,-0.44406 -4.440597,-0.888119 -6.660894,-0.888119 -2.220299,0 -5.328715,0.444059 -6.660894,0.888119 -1.776239,0.444059 -1.776239,0.888119 -1.776239,0.888119 v 11.989612 c 0,1.77624 1.776239,1.77624 1.776239,1.77624 0,2.22029 -0.44406,5.32871 -0.88812,6.21683 -0.444059,1.33218 -1.332179,4.88466 -1.332179,6.66089 0,1.77624 0.44406,5.32872 0.44406,6.21684 0,0.88812 -0.44406,4.44059 -3.108416,5.77277 -2.664359,1.33218 -5.328717,3.99654 -6.660895,5.77278 -1.332179,1.77624 -0.888119,5.77277 -0.888119,5.77277 v 48.84656 c 0,0 0,16.4302 0.44406,20.42674 0,3.99654 2.664357,7.54902 2.664357,7.54902 h 32.41635 c 0,0 2.664358,-3.55248 2.664358,-7.54902 0,-3.99654 0.44406,-20.42674 0.44406,-20.42674 v -48.84656 c -0.44406,0 0,-3.99653 -1.332179,-5.77277 z"
                        p-id="5216" id="path5700" />
                    <path style="fill:#000000;stroke-width:0.12662637" inkscape:connector-curvature="0"
                        d="m 100.93664,215.48368 c 1.77624,-1.33218 4.4406,-4.4406 5.77278,-6.6609 1.33218,-2.22029 4.88465,-3.10841 5.77277,-3.10841 0.88812,0 4.4406,0.44406 6.21684,0.44406 1.77623,0 5.77277,-1.33218 6.66089,-1.33218 0.88812,-0.44406 3.99654,-0.88812 6.66089,-0.44406 0,0 -0.44406,1.33218 1.33218,1.33218 h 11.98961 c 0,0 0.88812,0.44406 1.33218,-1.33218 0.44406,-1.77624 0.44406,-4.4406 0.44406,-6.6609 0,-2.22029 -0.44406,-4.88465 -0.44406,-6.66089 -0.44406,-1.77624 -1.33218,-1.33218 -1.33218,-1.33218 h -11.98961 c -1.77624,0 -1.33218,1.33218 -1.33218,1.33218 -2.66435,0 -5.32871,-0.44406 -6.66089,-0.44406 -0.88812,-0.44406 -4.88466,-1.33218 -6.66089,-1.33218 -1.77624,0 -5.32872,0.44406 -6.21684,0.44406 -0.88812,0 -4.44059,-0.44406 -5.77277,-3.10842 -1.33218,-2.66435 -3.99654,-5.32871 -5.77278,-6.66089 -1.776237,-1.33218 -5.772767,-0.88812 -5.772767,-0.88812 H 46.317299 c 0,0 -16.430195,0 -20.426735,0.44406 -3.99654,0 -7.54902,2.66436 -7.54902,2.66436 v 32.41635 c 0,0 3.55248,2.66436 7.54902,2.66436 3.99654,0 20.426735,0.44406 20.426735,0.44406 h 48.846574 c 0,-1.33218 3.99653,-0.88812 5.772767,-2.2203 z"
                        p-id="5217" id="path5702" />
                </g>
            </svg>

<use id="jiupinshadow" xlink:href="#jiupin" width="80" filter="url(#blur-moon)" transform="skewX(10)" />

<use xlink:href="#jiupinshadow" x="40" y="0" />

最后完整版的画面是这样的

源代码地址

在线围观

领导：阿仁啊，听说你在啤酒节上很卖力的炒气氛啊

阿仁：是的，为了能抬高园区的人气，我可是喝了不少，带动了不少人，领导你看还满意吗？

领导：满意，小伙子有前途，不过有个事要你收个尾。

阿仁：啥事啊

领导：园区那边的人说你最后离开啤酒节现场的时候喊了一声‘这一轮我请了’，他们把账单寄过来了。

阿仁：领导，那是我喝多了，不能算啊....