我愛上了SVG。當(dāng)然，一開始代碼看起來很稠密且困難，但是當(dāng)您了解結(jié)果時，您會看到結(jié)果的美麗。獎勵是這些結(jié)果是代碼，因此可以將其連接到CMS。您的設(shè)計師可以放心，因為他們不必為您的網(wǎng)站上的每篇文章或產(chǎn)品重現(xiàn)效果。

今天，我想向您展示如何提出這種玻璃文字效果。

步驟0：耐心和空間

SVG可能會有很多事情要做，尤其是當(dāng)您剛開始學(xué)習(xí)它時（如果是，克里斯的書是一個不錯的起點）。這實際上是一種全新的語言，尤其是對於缺乏設(shè)計排骨的人，有很多新的技術(shù)和考慮因素需要了解。但是，像HTML一樣，您會發(fā)現(xiàn)我們可以提供一些工具，以幫助使SVG更容易掌握。因此，請保持耐心並繼續(xù)嘗試！

另外，給自己空間。字面上地。 SVG代碼很密集，因此我喜歡使用兩三個新線路將其置於空間狀態(tài)。它使代碼更容易閱讀，並幫助我了解如何分離不同的零件，而視覺分散較少。哦，並使用評論標(biāo)記您在文檔中的位置。這可以幫助組織您的想法並記錄您的發(fā)現(xiàn)。

在學(xué)習(xí)這種玻璃效果的過程中，我為每一步進(jìn)行了演示，以幫助鞏固我們涵蓋的事情。

好的，現(xiàn)在我們已經(jīng)做好了精神準(zhǔn)備，讓我們進(jìn)入它的肉！

步驟1：獲取基本圖像

首先：我們需要圖像作為玻璃效果的背景。在這裡，我們有一個。您會注意到SVG元素中“ Viewbox屬性”的尺寸和元素相同。這樣可以確保與我們鏈接到的實際圖片完全相同。

這是要注意的關(guān)鍵區(qū)別：我們正在鏈接到圖像。 SVG文件本身不會繪製柵格圖像，但是我們可以在SVG代碼中引用一個圖像，並確保資產(chǎn)位於我們指向的位置。如果您以前曾與Adobe Indesign合作過，那麼這很像是在佈局中鏈接到圖像資產(chǎn) - 圖像在Indesign佈局中，但資產(chǎn)本身實際上居住在其他地方。

步驟2：扭曲圖像

到目前為止，直截了當(dāng)，這是事情變得複雜的地方，因為我們將在剛插入的圖像中添加過濾器。該過濾器將扭曲圖像。如果您仔細(xì)觀察最後一步中的演示之間的差異，那麼您會發(fā)現(xiàn)圖像中對象的邊緣有點粗糙和波浪狀。那是工作中的過濾器！

首先，我們創(chuàng)建另一個

我們的第一個過濾器（#displacement）將扭曲我們的圖像。我們將使用胎兒和聯(lián)合置換術(shù)，每種薩拉·索伊丹（Sara Soueidan）所解釋的要好於我在這篇文章中的能力。博·傑克遜（Beau Jackson）還寫了一篇不錯的作品，展示瞭如何使用它們來產(chǎn)生雲(yún)效果?？梢哉f，這兩個過濾器傾向於一起進(jìn)行，我想將它們視為需要“搖擺”的東西時。

有了我們的過濾器容器，我們只需要在上使用過濾器屬性將該過濾器應(yīng)用於我們的圖像！

 <svg>

  
  
  
  
  <filter>
    
    <fedisplacementmap in2="“湍流”" in="“" sourcegraphic scale="“" xchannelselector="“" r ychannelselector="“" g></fedisplacementmap>
  </filter>

  

</svg> 

步驟3：剪輯文本

不過，我們不希望整個圖像被扭曲。我們將把扭曲的的形狀剪切到某些文本的形狀。從本質(zhì)上講，這將是“通過”玻璃的圖片的一部分。

為此，我們需要在中添加元素並給它一個ID?，F(xiàn)在，在我們的的剪輯中調(diào)用此ID將其形狀限制為我們的的形狀。精彩的！

步驟4：顯示完整圖像

好的，所以我們將扭曲的夾在上是布宜諾，但是現(xiàn)在圖像的其餘部分消失了。沒有布宜諾。

我們可以通過添加相同的副本來抵消這一點，但是在我們現(xiàn)有的之前沒有剪輯路徑或過濾器屬性。這是我喜歡添加一些不錯的評論以保持整潔的地方。這個想法就像將透明層放在我們到目前為止的層面上。

我知道，我知道，這不是很整潔，我們正在重複自己。理想情況下，我們將過濾器直接設(shè)置在元素上，並使用in =“ fordisplacementmap的背景圖像屬性扭曲文本背後的內(nèi)容，而無需額外的元素。不幸的是，這具有較差的瀏覽器支持，因此我們將使用多個圖像。

 <svg>

  

  
  <image xlink https:>
  

</image></svg> 

步驟5：再次放置文字…再次

接下來，我們將像最後一步一樣複製文本。不幸的是，由於文本在剪輯路徑中，因此現(xiàn)在無法渲染。我保證，這是我們最後一次重複這樣的內(nèi)容！

現(xiàn)在，我們應(yīng)該擁有一些看起來像普通圖像，上面有黑色文字。如果我們已經(jīng)製作的上的失真過濾器是我們可以看到的“通過”玻璃，那麼我們的新將是玻璃本身。

 <svg>

  

  
  <clippath>
    <text x="“" y="“" text-andor="“中間”"> kyoto </text>
  </clippath>
        
  
  <text x="“" y="“" text-andor="“中間”"> kyoto </text>



</svg> 

步驟6：創(chuàng)建文本的黑暗邊緣

至少對我來說，這是開始變得令人興奮的地方！ ？

我們想沿文本元素創(chuàng)建一個深色邊緣，當(dāng)與光邊緣配對時（接下來我們將要查看），將在圖像上為文本的外觀增添深度。

我們想要一個新的過濾器，所以讓我們在過濾器的SVG元素中創(chuàng)建一個過濾器，並給它一個4“以達(dá)到玻璃效果，但是看看如果將其設(shè)置為1…或100，會發(fā)生什麼！

FeOffset用於在X-或Y軸上移動上一個原始（股骨學(xué)）中的所有“像素”。值dx =“ 5”和dy =“ 5”分別在x軸和y軸上移動“像素”。數(shù)字越高，他們移動的越遠(yuǎn)。對DX的負(fù)數(shù)為負(fù)數(shù)，“像素”將向左移動。負(fù)面的dy，他們會上升！同樣，當(dāng)您與他們一起玩耍時，您開始學(xué)習(xí)的東西。

我圍繞“像素”的引號的原因是因為它們不是像您在CSS中所期望的那樣的屏幕像素。相反，他們指的是我們在父

feflood很棒。如果您想用顏色填充屏幕，這是您需要的原始內(nèi)容！您可能想知道為什麼我們現(xiàn)在無法閱讀我們的文本。那是因為您只能看到創(chuàng)建的最後一個過濾器原始的結(jié)果。每個先前的原語的結(jié)果都與我們的元素有關(guān)。 Feflood的結(jié)果就像它的名字一樣：顏色氾濫。它不知道您以前做了什麼，也不在乎 - 它只是將顏色填滿區(qū)域。

在這裡，有些人開始對SVG感到沮喪。當(dāng)您看不到某件事時，很難處理！相信我，隨著您與SVG合作，您會習(xí)慣這一點。實際上，接下來的幾個步驟將需要我們依靠這一點，並相信一切仍然存在。

繁殖力將為我們解決這個問題。它做什麼？ MDN將其描述為：

這SVG Filter使用Porter-Duff合成操作之一：在圖像空間中，在圖像空間中執(zhí)行兩個輸入圖像的組合：在，in，in，in，cop，cop，out，xor和lighter上。

對我來說，吉布巴·賈巴（Jibba-Jabba）。我認(rèn)為它會影響In2的顏色/α的α層。

有了這一點，我們可以再次看到我們的文本拼寫出來，並且由於我們使用的顏色略有透明，因此我們甚至可以看到扭曲的“玻璃”效果。偉大的！

 <svg>

  
    
  
  
    <feconvolvematrix order="“" kernelmatrix="“" in="“" dark_edge_01 dark_edge_02></feconvolvematrix>
    <feoffset dx="“" dy="“" in="“" dark_edge_02 dark_edge_03></feoffset>
    <feflood flood-color="“" rgba dark_edge_04></feflood>
    <fecomposite in="“" dark_edge_04 in2="“" dark_edge_03 operator="“" dark_edge></fecomposite>
    
  

  

</svg> 

第7步：讓我們做輕邊

這與我們的字面意義上的基本相同，但是我們將使用負(fù)DX/DY值向向左移動並向左移動。這次我們還設(shè)置了略帶白色的顏色。我們的目標(biāo)是良好的深度效果。

我們再次處於一個我們可以看到的是濾鏡原始的最新結(jié)果，但是我們看不到深色邊緣！繁殖不是我們要用來將它們?nèi)诤显谝黄鸬臇|西，因為我們不希望淺邊緣顏色的深色邊緣的alpha……我們希望看到兩者！這導(dǎo)致我們……

 <svg>
  <filter>

    

      
      <feconvolvematrix order="“" kernelmatrix="“" in="”" light_edge_01 light_edge_02></feconvolvematrix>
      <feoffset dx="“" dy="“" in="“" light_edge_02 light_edge_03></feoffset>
      <feflood flood-color="“" rgba light_edge_04></feflood>
      <fecomposite in="“" light_edge_04 in2="“" light_edge_03 operator="“" result="“" light_edge></fecomposite>

    
  
  </filter>
</svg> 

步驟8：結(jié)合邊緣

股！這是英雄。它使我們能夠取得許多原始結(jié)果並將其合併，製作新圖像。哇，我們現(xiàn)在可以一起看到黑暗和淺邊緣！

但是，我們確實希望它們是邊緣，而不是填充整個文本，因此我們需要刪除原始佔用的空間。接下來，我們需要的另一個繁殖物可以砍掉原始的源圖。因為我們使用股骨學(xué)來為我們的邊緣增添了字母，所以我們現(xiàn)在可以從雌性的結(jié)果中切碎原始字母。

 <svg>
  <filter>

    

    <femerge edges>
      <femergenode in="“" dark_edge></femergenode>
      <femergenode in="“" light_edge></femergenode>
    </femerge>
    <fecomposite in="“" edges in2="“" sourcegraphic operator="“" out edges_complete></fecomposite>

  </filter>
</svg> 

現(xiàn)在，我們開始看起來像玻璃，只缺少一塊。

步驟9：是的，斜角

我們具有相當(dāng)不錯的3D玻璃效果。但是，字母看起來很平坦。讓我們再增加一個效果，使它們看起來更圓潤。

為了實現(xiàn)這一目標(biāo)，我們將創(chuàng)造出一種偏愛的效果。

首先，我們將使用fegaussianblur。這會稍微模糊我們現(xiàn)有的過濾器。我們將使用這種模糊的結(jié)果作為基礎(chǔ)，以添加一些fepecularighting。像往常一樣，請隨時在這裡玩數(shù)字，看看您可以獲得什麼效果！您可能要更改的主要屬性是照明顏色屬性。我們在這裡使用的圖像有點黑，因此我們使用的是明亮的照明色。如果您的圖像非常明亮，這將使字母難以閱讀，因此在這種情況下，您可能會使用較深的照明色。

 <svg>
  <filter>
  
    

    <fegaussianblur stddeviation="“" bevel_blur></fegaussianblur>
    <fesculllighting bevel_lighting in="“" bevel_blur specularconstant="“" phepularexponent="“" lighting-color="“" rgba>
      
    
    
</fesculllighting></filter></svg> 

步驟10：現(xiàn)在在一起！

最後，準(zhǔn)備好所有的碎片，我們最後一位動股會為完成效果做好一切準(zhǔn)備！

 <svg>
  <filter>

    

    <femerge>
      <femergenode in="“" edges_complete></femergenode>
      <femergenode in="“" bevel_complete></femergenode>
    </femerge>
  </filter>
</svg>

這是一切在一起，很好地分開並評論：

 
<svg viewbox="“">
        
  
  <image xlink https:>
  
  <clippath>
    <text x="“" y="“" text-andor="“中間”"> kyoto </text>
  </clippath>
    
  
  <text x="“" y="“" text-andor="“中間”" filter="“" url> kyoto </text>
    
</image></svg>


<svg>
  <filter>
    
    <fedisplacementmap in2="“湍流”" in="“" sourcegraphic scale="“" xchannelselector="“" r ychannelselector="“" g></fedisplacementmap>
  </filter>
    
  <filter>
            
    
    
    <feoffset dx="“" dy="“" in="“" dark_edge_01 dark_edge_03></feoffset>
    <feflood flood-color="“" rgba dark_edge_04></feflood>
    <fecomposite in="“" dark_edge_04 in2="“" dark_edge_03 operator="“" dark_edge></fecomposite>     
            
    
    
    <feoffset dx="“" dy="“" in="“" light_edge_01 light_edge_03></feoffset>
    <feflood flood-color="“" rgba light_edge_04></feflood>
    <fecomposite in="“" light_edge_04 in2="“" light_edge_03 operator="“" result="“" light_edge></fecomposite>
          
    
    <femerge edges>
      <femergenode in="“" dark_edge></femergenode>
      <femergenode in="“" light_edge></femergenode>
    </femerge>
    <fecomposite in="“" edges in2="“" sourcegraphic operator="“" out edges_complete></fecomposite>
          
    
    <fegaussianblur stddeviation="“" bevel_blur></fegaussianblur>
    <fesculllighting bevel_lighting in="“" bevel_blur specularconstant="“" phepularexponent="“" lighting-color="“" rgba>
      
    
    
    <femerge>
              <femergenode in="“" edges_complete></femergenode>
              <femergenode in="“" bevel_complete></femergenode>
    </femerge>

  </fesculllighting></filter>
</svg> 

以上是用SVG產(chǎn)生逼真的玻璃效果的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！