阅读 304

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

1、生活小事

妈妈:小恺,为什么我们家的窗户打破了,是不是你搞的?

小恺:这个要从昨晚说起......和爸爸有关

妈妈:和爸爸有啥关系?

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

妈妈:......

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

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

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

2、制作破窗

要想从破窗看外面那么首先得有个破窗,这就需要用svg工具来只制作了,我们继续使用inkscape。

然后我们再做一个和这个多角星一样的长方形框,设置两者的差集,就得到了一个破窗了

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

黑色为可填充部分
黑色为可填充部分,两者互补

3、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可以放置的具体的内容包括:

简单来说就是基本都可以啦

4、玻璃效果

现在我们再把直接看到霓虹灯的效果和透过玻璃看到的效果区分开来,这个就需要使用我们的老朋友,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>使用,这样多重特效就能叠加使用了。

5、生活小事后续

小恺:爸爸,出来吧。

爸爸:妈妈走了吗?

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

爸爸:嘿嘿,你妈不会为难你的,要是我,我会很惨的。

小恺:还有,鬼店这种烂恐怖故事就不要再讲了,你看,上一篇文章都没几个人看....

爸爸:都是他们不识货,希望这次点赞的人能多些....

源代码


关注下面的标签,发现更多相似文章
评论