讓我們使用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中文網其他相關文章！