雲破月來花弄影-SVG多種技術組合實現

天仙子·水調數聲持酒聽

【宋】張先

水調數聲持酒聽，午醉醒來愁未醒。送春春去幾時回？臨晚鏡，傷流景，往過後期空記省。
沙上並禽池上暝，雲破月來花弄影。重重簾幕密遮燈，風不定，人初靜，明日落紅應滿徑。

昨天七夕，下班在地鐵裏面看到了各類恩愛撒狗糧的，不由想起當年情竇初開的時候，很是喜歡宋詞。而張先，由於「影」字用的好，被稱爲「張三影」，這首詞就是三影之一（不是火影）。回到家，小孩和老婆都睡了（996害死人啊），但心中的火卻旺的很，右手也不安份。我想到今天多少對情侶在那啥，我卻只能一我的，心中躁動不已，藝術之魂熊熊燃燒，我控制住右手，強行挪開了點擊某hub網站的衝動，點開了另外一個某hub網站，開始了個人藝術創做。

一、月來

用svg作個月亮仍是很簡單的，只要畫一個發光的大圓餅就行了，上代碼。

<circle id="whitemoon" cx="420" cy="160" r="60" fill="white" />複製代碼

上帝說，要有光，那就來個光

<filter id="blur-moon">
                <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>複製代碼

用feGaussianBlur模糊後的做爲月亮的光，和大圓餅合起來，就是一個發光的月亮了

<use xlink:href="#whitemoon" />
<use xlink:href="#whitemoon" filter="url(#blur-moon)" />複製代碼

這個月亮圓也很圓，亮也很亮，可是做爲一個現代人，我知道月亮上是有環形山的，這麼潔白無暇的月亮太假了，因此還要加點黑影。

<circle id="greymoon" cx="420" cy="170" r="45" fill="grey" fill-opacity="0.15"
                filter="url(#filter-greymoon)" />
<filter id="filter-greymoon" >
                <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="9" seed="3" />
                <feDisplacementMap in="SourceGraphic" scale="120" />
            </filter>複製代碼

看過前面作雲文章的朋友都知道，feTurbulence和feDisplacementMap的組合用來作紋理和腐蝕效果是很好的，這裏也用來作月亮的黑影，這裏須要說明一個知識點，這個問題以前其實困擾了我好久。

咱們使用filter特效的時候，若是效果超出了圖形自己的矩形框範圍，那麼效果會在矩形框範圍直接切斷，好比上面這個greymoon,顯示出來是這樣的

明顯能夠看出左邊切掉了一塊，很是影響效果，去掉邊界的限制在哪呢？就在filter的屬性，這個例子裏面，我改爲這樣就行了

<filter id="filter-greymoon" height="250%" width="250%" x="-100%" y="-100%">複製代碼

把filter的width，hegith加寬加高，單這樣還不行，由於width,height只能影響圖形的右邊和下邊，結果效果只是這樣

能夠看到，左邊和上邊仍然被無情的截取了，因此必須把x,y參數加上去，由於是向左和向上，在座標原點前，因此是負數，最終的效果以下

最後把陰影加到大月亮上去，就能看到最終效果了

<circle id="whitemoon" cx="420" cy="160" r="60" fill="white" />
            <circle id="greymoon" cx="420" cy="170" r="30" fill="grey" fill-opacity="0.25"
                filter="url(#filter-greymoon)" />
<filter id="filter-greymoon" width="350%" height="250%" x="-100%" y="-100%">
                <feTurbulence type="fractalNoise" baseFrequency="0.03" numOctaves="9" seed="3" />
                <feDisplacementMap in="SourceGraphic" scale="120" />
            </filter>
<g id="moon">
                <use xlink:href="#whitemoon" />
                <use xlink:href="#whitemoon" filter="url(#blur-moon)" />
                <use xlink:href="#greymoon" filter="url(#blur-greymoon)" />
</g>
<use xlink:href="#moon" />複製代碼

一個比較真實的月亮就作好了（不要和我提陰影和真實的月面狀況不同，我又不是華爲手機的AI拍攝，能自動把真實月面給P出來）。

二、雲破

月亮作出來了，咱們開始作雲。以前在作雲的文章裏面其實已經很詳細的講了作雲的方法，因此我這邊就不詳細講了。不過此次咱們搞點新花樣，不用css的box-shadow來作，直接使用svg來作，代碼會更簡潔。

<defs>
<ellipse id="cloudback" cx="260" cy="230" rx="280" ry="70" fill="white" fill-opacity="0.9"
                filter="url(#blur-cloud)" />
            <ellipse id="cloudmid" cx="260" cy="240" rx="220" ry="55" fill="#9EA8B3" fill-opacity="0.5"
                filter="url(#blur-cloud)" />
            <ellipse id="cloudfront" cx="260" cy="260" rx="170" ry="30" fill="black" fill-opacity="0.2"
                filter="url(#blur-cloud)" />
<filter id="blur-cloud" width="350%" height="250%" x="-100%" y="-100%">
                <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
            </filter>
<filter id="filter-back" width="350%" height="250%" x="-100%" y="-100%">
                <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="0" />
                <feDisplacementMap in="SourceGraphic" scale="170" />
            </filter>
            <filter id="filter-mid" width="350%" height="250%" x="-100%" y="-100%">
                <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="0" />
                <feDisplacementMap in="SourceGraphic" scale="150" />
            </filter>
            <filter id="filter-front" width="350%" height="250%" x="-100%" y="-100%">
                <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4" seed="0" />
                <feDisplacementMap in="SourceGraphic" scale="100" />
            </filter>
<g id="cloud">
                <use xlink:href="#cloudback" filter="url(#filter-back)" />
                <use xlink:href="#cloudmid" filter="url(#filter-mid)" />
                <use xlink:href="#cloudfront" filter="url(#filter-front)" />
            </g>
</defs>
<use xlink:href="#cloud" />複製代碼

最後的效果以下

三、花弄影

在這裏咱們先須要一堵牆，不然影子在哪顯示呢，因此我就上花瓣網找了一堵牆過來。圖片地址在這裏

針對原圖我作了一點處理，主要是把牆面搞暗了一些，把圖片的天空部分變成了透明，方便顯示月亮和雲，使用的一樣是svg的圖片顯示

<image xlink:href="yuanqiang1.png" x="0" y="300" width="400"/>複製代碼

而後是花影，要有花影，首先得有花，一樣的，我又從花瓣網弄來了一束花。圖片地址忘了存，找不到了┐(ﾟ～ﾟ)┌

<image xlink:href="huazhi1.png" x="200"y="690" width="170"></image>複製代碼

如今關鍵來了，花弄影主要是影，咱們開始光影的魔法。

<filter id="huazhishadow" x="0" y="0" width="200%" height="200%">
                <feOffset result="offOut" in="SourceAlpha" dx="210" dy="0" />
                <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
                <feBlend in="SourceGraphic" in2="blurOut" mode="darken" />
            </filter>複製代碼

先介紹下這幾個filter：

feoffset：該輸入圖像做爲一個總體，在屬性dx和屬性dy的值指定了它的偏移量。說白了就是把原圖在離開dx和dy的距離外複製一個同樣的圖像，活脫脫的拷貝魔法，這就是filter界的旗木卡卡西啊。

feGaussianBlur：老朋友，幹模糊化的，略

feBlend：把兩個對象組合在一塊兒，使它們受特定的混合模式控制。這相似於圖像編輯軟件中混合兩個圖層。它是個粘合劑，把上面兩個filter的效果合在一塊兒，而且用mode來控制最後的效果。mode的效果有不少種，咱們這邊須要的是影子，因此選擇了darken，具體的mode說明，請看這裏。

<image xlink:href="huazhi1.png" x="0" y="600" width="170" filter="url(#huazhishadow)" />複製代碼

最後看到的是這樣

對話錄：

畫外音：是否是這樣就算作好了

我：固然沒有，你沒發現我選的這個牆不是平面的嗎

畫外音：那又怎樣

我：這樣影子打上去應該是斜的，不是這樣平平的影子

畫外音：爲啥你不選個正平牆的圖呢

我：花瓣上沒找到啊...

畫外音：你爲啥要執着於這個影子效果呢，用如今這個就好了

我：不行，我是個嚴謹的藝術家，個人影子要真實，真實，再真實

畫外音：那剛纔月亮的陰影你咋不追求真實的月面陰影呢

我：.....，警察叔叔，就是這個聲音給我打的詐騙電話，立刻抓他去坐牢。

我：讓你和我擡槓

畫外音：算你狠...

-------------------------------------------------------我是分割線----------------------------------------------

咱們須要把花的圖片和花的影子分開處理，如今咱們把生成影子的花弄出屏幕外

<image xlink:href="huazhi1.png" x="-630" y="720" width="170" filter="url(#huazhishadow)">複製代碼

經過x的設置，把花的圖像移到 屏幕外，只留下影子

<image xlink:href="huazhi1.png" x="-630" y="720" width="170" filter="url(#huazhishadow)" transform="skewX(29)"/>複製代碼

這裏要講下transform：

transform和上面這些filter不一樣，是SVG元素的屬性。做用是設置svg元素的變形，包括位移translate, 旋轉rotate, 縮放scale, 斜切skew。今天咱們用到的就是斜切（skew）。具體的你們能夠去看這篇文章，講的很詳細。最後的花影的效果以下：

四、成品

當咱們把月亮，雲、院牆和花影組合起來，就能夠看到最終的效果了

<image xlink:href="yuanqiang1.png" x="0" y="300" width="400"/>
        <use xlink:href="#moon" />
        <use xlink:href="#cloud" />
        <image xlink:href="huazhi1.png" x="200"y="690" width="170"></image>
        <image xlink:href="huazhi1.png" x="-630" y="720" width="170" filter="url(#huazhishadow)" transform="skewX(29)"/>複製代碼

源碼地址

在線圍觀