破窗外的霓虹燈-沉迷SVG的clippath沒法自拔

時間 2019-11-06

標籤窗外霓虹燈沉迷 svg clippath 沒法自拔简体版

原文原文鏈接

一、生活小事

媽媽：小愷，爲何咱們家的窗戶打破了，是否是你搞的？git

小愷：這個要從昨晚提及......和爸爸有關github

媽媽：和爸爸有啥關係？bash

小愷：昨天晚上，爸爸給我講了一個玫瑰酒店的恐怖故事，結果晚上作噩夢，夢到我趴在家裏的窗戶，看到外面一個「玫瑰酒店」，招牌是紅色的燈，血紅血紅的。svg

媽媽：......工具

小愷：忽然，那個招牌就開始閃啊閃，幾個字忽然就不亮了，變成了「鬼店」，好可怕，我一懼怕，順手就扔了個東西過去，聽到「咣噹」一聲，窗戶就破了，我也醒了......ui

媽媽：這個死鬼亂給小孩講鬼故事，看我不打死他...，你爸呢，有看到在哪嗎？url

小愷：不知道哦，可能在小陽臺看手機吧，他最近很喜歡刷知乎，關注了不少小姐姐...spa

二、製做破窗

要想從破窗看外面那麼首先得有個破窗，這就須要用svg工具來只製做了，咱們繼續使用inkscape。3d

而後咱們再作一個和這個多角星同樣的長方形框，設置二者的差集，就獲得了一個破窗了code

最後，把這個多角星和破窗分別存成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>使用，這樣多重特效就能疊加使用了。