破窗外的霓虹灯-沉迷SVG的clippath没法自拔

一、生活小事

妈妈：小恺，为何咱们家的窗户打破了，是否是你搞的？

小恺：这个要从昨晚提及......和爸爸有关

妈妈：和爸爸有啥关系？

小恺：昨天晚上，爸爸给我讲了一个玫瑰酒店的恐怖故事，结果晚上作噩梦，梦到我趴在家里的窗户，看到外面一个“玫瑰酒店”，招牌是红色的灯，血红血红的。

妈妈：......

小恺：忽然，那个招牌就开始闪啊闪，几个字忽然就不亮了，变成了“鬼店”，好可怕，我一惧怕，顺手就扔了个东西过去，听到“咣当”一声，窗户就破了，我也醒了......

妈妈：这个死鬼乱给小孩讲鬼故事，看我不打死他...，你爸呢，有看到在哪吗？

小恺：不知道哦，可能在小阳台看手机吧，他最近很喜欢刷知乎，关注了不少小姐姐...

二、制做破窗

要想从破窗看外面那么首先得有个破窗，这就须要用svg工具来只制做了，咱们继续使用inkscape。

而后咱们再作一个和这个多角星同样的长方形框，设置二者的差集，就获得了一个破窗了

最后，把这个多角星和破窗分别存成svg文件，供咱们后面使用。

黑色为可填充部分

黑色为可填充部分，二者互补

三、clippath

今天主要的部分就是使用svg的clip-path来制做破窗，个人构思（请自动切换到艺术家模式）是从破窗的玻璃部分看到的是模糊的霓虹灯，而透过窟窿看到的是清晰的霓虹灯，二者要叠在一块儿。看代码

<clipPath id="brokenwindow">
        <path
          style="fill:none;fill-opacity:1;stroke:#73a55b;stroke-width:0.13192782;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 71.213729,186.93404 h 0.09108 l 39.841251,-28.33716 0.90424,24.22727 19.51487,-10.80549 46.29619,6.16521 -39.57046,-11.67019 69.81502,-18.71902 -51.17883,-3.28311 -10.57636,-0.1562 0.0156,-0.52136 -4.6473,-0.29798 4.65307,0.12034 0.83459,-27.43126 -29.18741,20.96313 -32.716983,-16.09328 4.378167,19.72217 -38.430075,-22.71019 15.677428,23.52335 -58.6900966,12.68158 65.5670776,-1.88555 -11.939309,5.53299 18.088863,6.95323 z"
          id="path817" inkscape:connector-curvature="0" />
      </clipPath>
      <clipPath id="brokenwindow1">
        <path
          style="fill:none;fill-opacity:1;stroke:#73a55b;stroke-width:0.10304408;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
          d="m 8.223522,116.21084 v 38.02155 L 66.732561,141.59 51.055169,118.0667 l 38.429992,22.71015 -4.378165,-19.72213 32.716914,16.09324 29.15107,-20.93712 z m 138.786898,0 -0.83375,27.40524 -4.65307,-0.12034 4.6473,0.29798 -0.0156,0.52135 10.57634,0.15621 51.17872,3.2831 -69.81487,18.71899 39.57039,11.67015 -46.2961,-6.1652 -19.51483,10.80549 -0.90424,-24.22724 -39.841156,28.33709 h -0.09111 l 8.740665,-22.02146 -18.088824,-6.95321 11.939284,-5.53298 -65.3860088,1.88018 v 32.68229 H 208.12048 v -70.73764 z"
          id="rect4544" inkscape:connector-curvature="0" />
      </clipPath>复制代码

把上面的两个图定义成了clippath,而后咱们分别看下被clip-path切割后的效果：

<use xlink:href="#useall" clip-path="url(#brokenwindow)" />复制代码

clippath能够放置的具体的内容包括：

简单来讲就是基本均可以啦

四、玻璃效果

如今咱们再把直接看到霓虹灯的效果和透过玻璃看到的效果区分开来，这个就须要使用咱们的老朋友，filter了。

<filter id="smallDistortion">
        <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence" />
        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="R" yChannelSelector="G" />
      </filter>复制代码

关于这个特效，在我另一篇讲作云的文章里面讲的很详细，我就很少说了。效果以下：

<defs>
<g id="useglass">
        <use xlink:href="#useall" filter="url(#smallDistortion)" />
</g>
</defs>
<use xlink:href="#useglass"  />复制代码

而后咱们把clippath和这个玻璃特效一块儿加上，就完成了今天的最终效果：

<use xlink:href="#useall" clip-path="url(#brokenwindow)" />
    <use xlink:href="#useglass"  clip-path="url(#brokenwindow1)"/>
    <use xlink:href="#showbrokenwindow1" />复制代码

showbrlienwindow1是为了你们看清楚clippath的边界，因此描了一个出来，最终的效果以下：

还有一点忍不住要说一句，<use>标签真是好用的东西，上一章实现鬼店的时候，用了一堆的<use>标签：

<use xlink:href="#mei" id="meifront" class="svg-text" />
        <use xlink:href="#mei" id="meiback" filter="url(#filter-blur-svg)" class="svg-text" />
        <use xlink:href="#jiu" id="jiufront" class="svg-text" />
        <use xlink:href="#jiu" id="jiuback" filter="url(#filter-blur-svg)" class="svg-text" />
        <use xlink:href="#wang" id="wangfront" class="svg-text-wang" />
        <use xlink:href="#wang" id="wangback" filter="url(#filter-blur-svg-wang)" class="svg-text-wang" />
        <use xlink:href="#gui" id="guifront" />
        <use xlink:href="#gui" id="guiback" filter="url(#filter-blur-svg)" />
        <use xlink:href="#dian" id="dianfront" />
        <use xlink:href="#dian" id="dianback" filter="url(#filter-blur-svg)" />复制代码

这些标签组合实现了动态的鬼店效果，今天咱们要在鬼店的效果上集体打包到clippath里面去怎么作呢，这样就行了

<g id="useall">
        <use xlink:href="#mei" id="meifront" class="svg-text" />
        <use xlink:href="#mei" id="meiback" filter="url(#filter-blur-svg)" class="svg-text" />
        <use xlink:href="#jiu" id="jiufront" class="svg-text" />
        <use xlink:href="#jiu" id="jiuback" filter="url(#filter-blur-svg)" class="svg-text" />
        <use xlink:href="#wang" id="wangfront" class="svg-text-wang" />
        <use xlink:href="#wang" id="wangback" filter="url(#filter-blur-svg-wang)" class="svg-text-wang" />
        <use xlink:href="#gui" id="guifront" />
        <use xlink:href="#gui" id="guiback" filter="url(#filter-blur-svg)" />
        <use xlink:href="#dian" id="dianfront" />
        <use xlink:href="#dian" id="dianback" filter="url(#filter-blur-svg)" />
      </g>
...
<use xlink:href="#useall" clip-path="url(#brokenwindow)" />
复制代码

咱们能够经过<g>把这些<use>的内容都集合到一块儿，加个ID，直接在外面被<use>使用，还能够

<g id="useglass">
        <use xlink:href="#useall" filter="url(#smallDistortion)" />
      </g>
...
<use xlink:href="#useglass"  clip-path="url(#brokenwindow1)"/>复制代码

再被包裹到一层<g>标签里面，而且在里面先用filter加一层特效，最后再被<use>使用，这样多重特效就能叠加使用了。

五、生活小过后续

小恺：爸爸，出来吧。

爸爸：妈妈走了吗？

小恺：走了，下次不要再让我撒谎了，明明是你一激动打破了玻璃，还要让我背黑锅。

爸爸：嘿嘿，你妈不会为难你的，要是我，我会很惨的。

小恺：还有，鬼店这种烂恐怖故事就不要再讲了，你看，上一篇文章都没几我的看....

爸爸：都是他们不识货，但愿此次点赞的人能多些....

源代码