用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中文网其他相关文章！