让我们使用SVG剪辑路径创建图像弹出效果

几周前，我偶然发现了Mikael Ainalem的这种很酷的弹出效果。它在CSS中展示了剪辑路径：path（），它在大多数现代浏览器中都得到了适当的支持。我想自己挖掘它，以更好地了解它的工作原理。但是在此过程中，我发现了剪辑路径的一些问题：path（）;并结束了在本文中找到我想与您一起浏览的另一种方法。

如果您尚未使用剪辑路径或不熟悉它，它基本上允许我们根据剪辑路径为元素指定显示区域，并隐藏落在夹子路径外的元素的部分。

剪辑路径的可能值包括圆，椭圆和多边形，将用例限制为这些特定形状。这是新的路径值所在的地方 - 它使我们能够使用更灵活的SVG路径来创建超出基本形状的各种剪辑路径。

让我们来了解有关剪辑路径的知识，并开始致力于悬停效果。使人的前景图像的基本思想似乎是从五颜六色的背景中弹出的，当元素悬停时大小的规模。一个重要的细节是前景图像动画（扩展和移动）如何独立于背景图像动画（仅扩展）。

这种效果看起来很酷，但是路径值存在一些问题。对于初学者来说，尽管我们提到支持通常是好的，但它不是很好，并且在撰写本文时徘徊了约82％的覆盖范围。因此，请记住，目前移动支持仅限于Chrome和Safari。

除了支持外，路径的更大，更奇怪的问题是，它目前仅适用于像素值，这意味着它没有响应。例如，假设我们放大了页面。马上，路径形状开始切断。

这严重限制了夹子路径的用例：path（），因为它只能在固定尺寸的元素上使用。多年来，响应式Web设计一直是广泛接受的标准，因此看到不遵循原则并专门使用像素单元的新CSS属性很奇怪。

我们要做的就是使用标准，广泛支持的CSS技术重新创建这种效果，以便它不仅有效，而且确实具有响应速度。

棘手的部分

我们希望任何溢出剪贴路径的东西只能在图像的顶部可见。我们不能使用标准CSS溢出属性，因为它会影响顶部和底部。

那么，除了溢出和剪辑路径外，我们还有什么选择？好吧，让我们在SVG本身中使用。 是一种SVG属性，它与新发行的和无反应的剪辑路径：路径不同。

SVG 元素

svg 和元素适应了SVG元素的坐标系，因此它们可以响应开箱即用。随着SVG元素的缩放，其坐标系也正在缩放，并根据涵盖广泛可能的用例的各种属性维持其比例。作为另外的好处，在SVG上使用CSS中使用夹式路径具有95％的浏览器支持，与夹子路径相比，它增加了13％。

让我们从设置我们的SVG元素开始。我使用Inkscape创建了基本的SVG标记和剪裁路径，只是为了使自己变得容易。完成此操作后，我通过添加自己的类属性来更新标记。

 <svg xmlns="“" http: viewbox="“">
  <defs>
    <clippath clippathunits="“" userpaceonuse>
      
    </clippath>
    <clippath clippathunits="“" userpaceonuse>
      
    </clippath>
  </defs>
  <g clip url transform="“" transfate>
    
    <image clip-path="“" url width="“" height="“" x="“" y="“" href="%E2%80%9C" ... transform="“" translate></image>
    
    
  </g>
</svg>

此标记可以很容易地用于其他背景图像和前景图像。我们只需要在图像元素内部的HREF属性中替换URL即可。

现在，我们可以在CSS中进行悬停动画。我们可以通过转换和过渡来度过难关，确保前景很好地集中，然后在悬停时进行缩放和移动事物。

 。图像 {
  变换：比例尺（0.9，0.9）;
  过渡：变换0.2s易于启动；
}

.image__foreground {
  转化原始：50％50％；
  变换：translatey（4px）比例（1，1）;
  过渡：变换0.2s易于启动；
}

图像：悬停{
  变换：比例尺（1，1）;
}

.Image：Hover .Image__foreground {
  变换：translatey（-7px）比例（1.05，1.05）;
}

这是上述HTML和CSS代码的结果。尝试调整屏幕大小并更改SVG元素的尺寸，以查看效果如何随屏幕尺寸缩放。

这看起来很棒！但是，我们还没有完成。我们仍然需要解决一些问题，因为我们已经将标记从HTML图像元素更改为SVG元素。

SEO和可访问性

内联SVG元素不会被搜索爬网索引。如果SVG元素是内容的重要组成部分，则您的页面SEO可能会受到打击，因为这些图像可能不会被拾取。

我们需要其他标记，该标记使用CSS隐藏的常规元素。以这种方式声明的图像会被爬网机自动拾取，我们可以在图像站点地图中提供指向这些图像的链接，以确保爬网设法设法找到它们。我们正在使用加载=“懒惰”，允许浏览器决定是否应推迟加载图像。

我们将把两个元素都包含在一个元素中，以便我们标记反映这两个图像之间的关系，并将它们组合在一起：

 <figud>
  
  <svg xmlns="“" http: viewbox="“">
     
  </svg>
  
  <img src="%E2%80%9C" ... alt="“" loading="“" lazy>
</figud>

我们还需要解决此效果的一些可访问性问题。更具体地说，我们需要为喜欢浏览网络的用户而没有动画和使用屏幕读取器浏览Web的用户进行改进。

使SVG元素可访问需要大量其他标记。此外，如果我们要删除过渡，我们将不得不覆盖相当多的CSS属性，如果我们的选择器特异性不一致，可能会导致问题。幸运的是，我们新添加的常规图像具有出色的可访问性功能，可以轻松地作为无动画浏览网络的用户的替代品。

 <figud>
  
  <svg xmlns="“" http: viewbox="“" aria true>
    
  </svg>

  
  <img src="%E2%80%9C" ... alt="“" loading="“" lazy>
</figud>

我们需要通过添加aria-hidden =“ true”来隐藏辅助设备中的SVG元素，我们需要更新我们的CSS，以包括偏爱的动态媒体查询。我们包含在没有减少运动偏好的情况下隐藏用户的后备图像，同时将其用于屏幕读取器等辅助设备。

 @Media（偏爱降低：无偏爱）{
.Fallback-image {
  剪辑：rect（0 0 0 0）; 
  剪辑路径：插图（50％）；
  身高：1px;
  溢出：隐藏；
  位置：绝对；
  白色空间：nowrap; 
  宽度：1px;
  } 
}

@Media（预先减少的动作）{
  。图像 {
    显示：无；
  }
}

这是改进后的结果：

请注意，这些改进不会改变没有偏爱动机偏好集或不使用屏幕读取器的用户的效果和行为。

那是一个包裹

开发人员对夹子路径CSS属性和新样式可能性的路径选项感到兴奋，但是许多人感到不满以发现这些值仅支持像素值。这不仅意味着该功能没有响应，而且严重限制了我们要使用的用例的数量。

我们将有趣的图像弹出悬停效果转换为使用剪辑路径：路径为SVG元素，该元素利用 svg元素的响应能力来实现同一元素。但是这样做，我们引入了一些SEO和可访问性问题，我们设法处理了一些额外的标记和后备图像。

感谢您抽出宝贵的时间阅读本文！让我知道这种方法是否使您了解如何实现自己的效果，以及您是否对如何以不同的方式处理这种效果有任何建议。

以上是让我们使用SVG剪辑路径创建图像弹出效果的详细内容。更多信息请关注PHP中文网其他相关文章！