如何使用CSS和SVG剪切和遮罩技術(shù)

hover_lew 發(fā)布于2019-08-29 11:14 / 1740人閱讀

摘要：通過結(jié)合使用和遮罩技術(shù)，你將會擁有更多的可能性去使用網(wǎng)絡(luò)圖像。在圖像上應(yīng)用遮罩元素為了使用得到一種感覺，我們將在圖像上使用遮罩。瀏覽器支持在我們使用這種新的處理圖像的方法之前，注意到瀏覽器對剪切和遮罩的支持不一致是非常重要的。

本文轉(zhuǎn)載自：眾成翻譯
譯者：hidoos
鏈接：http://www.zcfy.cc/article/1100
原文：https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/

SVGs 能夠很好的在 web 上工作, 剪切和遮罩允許你使用有趣的方式去展示或隱藏 web 圖像，使用這些技術(shù)也能讓的設(shè)計變得更加靈活因為你不需要去修改或者創(chuàng)建新的圖像——這些都可以用代碼來實現(xiàn)。通過結(jié)合使用 CSS 和遮罩技術(shù)，你將會擁有更多的可能性去使用網(wǎng)絡(luò)圖像。

需要明確的是，遮罩和剪切是通過 CSS 來處理圖像的兩種不同的方法，讓我們從剪切開始吧！

剪切基礎(chǔ)

如果你曾經(jīng)使用過 Photoshop , 你大概已經(jīng)很熟悉剪切遮罩了。他們有一些共同點，剪切通過放置矢量圖形來使用,比如圓和三角形, 在圖像和元素的上面矢量圖形外面的任何部分都會顯示，所有矢量圖形邊界的外面都將被隱藏。

舉個例子，如果一個三角形的剪切遮罩覆蓋上樹林圖像上的話, 你可以看到三角形里面的森林圖像。圖形的邊界被稱做剪切路徑, 不要和已經(jīng)廢棄掉的 clip 屬性混淆，你可以使用 clip-path 去創(chuàng)建一個剪切路徑。

深入理解剪切

剪切總是矢量路徑，這可能會比較混淆, 但是路徑的外面的任何部分都會被隱藏, 而路徑的里面都會顯示。為了更好的理解，你可以去測試一下，在 CodePen 上看看這個示例。

這是上面示例的 HTML 代碼片段：

這段 CSS 使剪切生效：

.polygon-clip-triangle-equilateral {
  -webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
  clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
  -webkit-clip-path: url("#polygon-clip-triangle-equilateral");
  clip-path: url("#polygon-clip-triangle-equilateral");
}

你可以看到 clipPathid 在 HTML 的哪個部分，它是如何使用 clip-path 的 URL 去制作剪切效果的。

Clippy 工具

Clippy 是一個用來生成 CSS 剪切路徑的偉大工具。這里有許多不同的初始圖像并且這些形狀的尺寸都是可以自定義的。

遮罩基礎(chǔ)

在網(wǎng)頁上，遮罩是使用 PNG 圖片、CSS 漸變、或一個 SVG 元素來隱藏圖片或其它元素的部分。我們將集中注意力在 SVG 圖像上，不過請注意遮罩可以使用其他類型的圖片或者樣式的。

遮罩屬性和遮罩元素

僅僅是為了幫助理解, 請記住被遮罩的元素是“原始”（還沒有應(yīng)用遮罩的）圖片，你可能不想看到全部的圖片,所以使用 CSS mask 屬性來完成隱藏部分圖片的工作。 mask 是 CSS 一組獨立屬性的簡寫 , 我們將接下來會介紹它。SVG 元素被用來給 SVG 內(nèi)部的圖像添加遮罩效果。在接下來的示例中, 遮罩是添加了漸變效果的圓形。

在 SVG 圖像上應(yīng)用 SVG 遮罩元素

為了使用 SVG mask 得到一種感覺，我們將在 SVG 圖像上使用遮罩。

這給人的第一印象可能會比較復(fù)雜, 但是它可以很好遮罩下面的圖像。我們有一張真實的圖片作為背景，那么 SVG 在哪里起作用呢？和剪切不同, 這張背景圖片技術(shù)上來說是在 SVG 元素內(nèi)部的。我們將使用 CSS 來給圖片應(yīng)用遮罩，屬性將來自于 SVG 遮罩元素，在我們的 CSS 中指定一個 mask-element id。

為了了解更多的細(xì)節(jié), 查看 Codepen 示例，這是遮罩 SVG 圖像的工作代碼:

如果你查看審查面板,你可以看到遮罩元素的邊界. 這個圓的圖形是使用遮罩創(chuàng)建的。

使用這段 CSS, 我們制定了在哪里找到遮罩，它將會找到 #mask1 id：

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

注意到在圓形里面的漸變了嗎？一個漸變被應(yīng)用,而且也給圓形設(shè)置了遮罩。

SVG 文本遮罩

文本遮罩可以做到非常酷的事情,比如通過文字的輪廓顯示圖像。好消息是文本元素可以在 SVG 內(nèi)部使用。瀏覽器也會在未來支持, 這可以以一種非常有趣的方式來結(jié)合使用圖片和排版。

下面是對發(fā)生的事的基本解釋. 這里有一段 SVG 文本元素在 SVG 遮罩內(nèi)部。我們指定了一個白色的 RGB 值, 它創(chuàng)建了一個橢圓環(huán)繞著遮罩文字。任何在橢圓內(nèi)部都能穿過文字直接顯示,產(chǎn)生一種剪切輪廓的感覺。

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

為了完全地理解，觀察和體驗這段代碼是非常有用的，試著在 Codepen 修改一下文字, 修改一下文字,調(diào)整一下尺寸。

瀏覽器支持

在我們使用這種新的處理圖像的方法之前，注意到瀏覽器對剪切和遮罩的支持不一致是非常重要的。剪切的支持程度比遮罩的高, 但是 IE 瀏覽器不完全支持剪切，現(xiàn)在的瀏覽器對 CSS 遮罩的支持也非常有限,所以我們建議在一些元素上使用這些特性來增強效果，這樣的話,如果用戶的瀏覽器不支持 , 它也不會影響到內(nèi)容的查看體驗。

如果要測試和查看遮罩和剪切的支持程度，我建議在 JSFiddle 或 Codepen 編寫一個實例然后在不同的瀏覽器里面測試，不要因為這些限制讓你感到失望——它們總是很好領(lǐng)先的游戲一旦支持的話就會變成主流,你將會確切的指導(dǎo)怎樣徹底改變你的圖像, 當(dāng)你感到困惑時, 一定要參考可信的引用網(wǎng)站 Can I Use.

在體驗過這些實例之后，這應(yīng)該提供了一個關(guān)于遮罩和剪切的好的介紹。盡管現(xiàn)在瀏覽器支持程度很有限,這將有可能在未來成為一種主流實踐。思考怎么使用這些技術(shù)創(chuàng)建一個有趣的視覺效果總是讓人感覺愉快，網(wǎng)絡(luò)圖像的未來讓我們可以不依賴圖像編輯器，直接在瀏覽器平臺上更高效的去創(chuàng)建和修改圖像。