用SVG產生逼真的玻璃效果

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

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

步驟0：耐心和空間

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

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

在學習這種玻璃效果的過程中，我為每一步進行了演示，以幫助鞏固我們涵蓋的事情。

好的，現在我們已經做好了精神準備，讓我們進入它的肉！

步驟1：獲取基本圖像

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

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

步驟2：扭曲圖像

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

首先，我們創建另一個

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

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

 <svg>

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

  

</svg> 

步驟3：剪輯文本

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

為此，我們需要在中添加元素並給它一個ID。現在，在我們的的剪輯中調用此ID將其形狀限制為我們的的形狀。精彩的！

步驟4：顯示完整圖像

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

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

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

 <svg>

  

  
  <image xlink https:>
  

</image></svg> 

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

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

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

 <svg>

  

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



</svg> 

步驟6：創建文本的黑暗邊緣

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

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

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

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

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

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

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

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

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

對我來說，吉布巴·賈巴（Jibba-Jabba）。我認為它會影響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步：讓我們做輕邊

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

我們再次處於一個我們可以看到的是濾鏡原始的最新結果，但是我們看不到深色邊緣！繁殖不是我們要用來將它們融合在一起的東西，因為我們不希望淺邊緣顏色的深色邊緣的alpha……我們希望看到兩者！這導致我們……

 <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：結合邊緣

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

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

 <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> 

現在，我們開始看起來像玻璃，只缺少一塊。

步驟9：是的，斜角

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

為了實現這一目標，我們將創造出一種偏愛的效果。

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

 <svg>
  <filter>
  
    

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

步驟10：現在在一起！

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

 <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產生逼真的玻璃效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！