如何使用CSS和SVG剪切和遮罩技術

本文轉載自：衆成翻譯
譯者：hidoos
連接：http://www.zcfy.cc/article/1100
原文：https://getflywheel.com/layout/css-svg-clipping-and-masking-techniques/

SVGs 可以很好的在 web 上工做, 剪切和遮罩容許你使用有趣的方式去展現或隱藏 web 圖像， 使用這些技術也能讓的設計變得更加靈活由於你不須要去修改或者建立新的圖像——這些均可以用代碼來實現。經過結合使用 CSS 和遮罩技術，你將會擁有更多的可能性去使用網絡圖像。

須要明確的是，遮罩和剪切是經過 CSS 來處理圖像的兩種不一樣的方法，讓咱們從剪切開始吧！

剪切基礎

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

舉個例子，若是一個三角形的剪切遮罩覆蓋上樹林圖像上的話, 你能夠看到三角形裏面的森林圖像。圖形的邊界被稱作剪切路徑, 不要和已經廢棄掉的 clip 屬性混淆，你可使用 clip-path 去建立一個剪切路徑。

深刻理解剪切

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

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

<svg class="clip-svg">
  <defs>
    <clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
      <polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
    </clipPath>
  </defs>
</svg>

這段 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 剪切路徑的偉大工具。這裏有許多不一樣的初始圖像而且這些形狀的尺寸都是能夠自定義的。

遮罩基礎

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

遮罩屬性和遮罩元素

僅僅是爲了幫助理解, 請記住被遮罩的元素是「原始」（尚未應用遮罩的）圖片， 你可能不想看到所有的圖片,因此使用 CSS mask 屬性來完成隱藏部分圖片的工做。 mask 是 CSS 一組獨立屬性的簡寫 , 咱們將接下來會介紹它。SVG 元素被用來給 SVG 內部的圖像添加遮罩效果。在接下來的示例中, 遮罩是添加了漸變效果的圓形。

在 SVG 圖像上應用 SVG 遮罩元素

爲了使用 SVG mask 獲得一種感受，咱們將在 SVG 圖像上使用遮罩。

這給人的第一印象可能會比較複雜, 可是它能夠很好遮罩下面的圖像。咱們有一張真實的圖片做爲背景，那麼 SVG 在哪裏起做用呢？和剪切不一樣, 這張背景圖片技術上來講是在 SVG 元素內部的。咱們將使用 CSS 來給圖片應用遮罩，屬性未來自於 SVG 遮罩元素，在咱們的 CSS 中指定一個 mask-element id。

爲了瞭解更多的細節, 查看 Codepen 示例，這是遮罩 SVG 圖像的工做代碼:

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
  <image xlink:href="image link" width="300px" height="300px" />
</svg>

若是你查看審查面板,你能夠看到遮罩元素的邊界. 這個圓的圖形是使用遮罩建立的。

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

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

注意到在圓形裏面的漸變了嗎？一個漸變被應用,並且也給圓形設置了遮罩。

<svg class="svg-mask">
   <defs>
     <mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
    </mask>
   </defs>
</svg>

SVG 文本遮罩

文本遮罩能夠作到很是酷的事情,好比經過文字的輪廓顯示圖像。好消息是文本元素能夠在 SVG 內部使用。瀏覽器也會在將來支持, 這能夠以一種很是有趣的方式來結合使用圖片和排版。

下面是對發生的事的基本解釋. 這裏有一段 SVG 文本元素在 SVG 遮罩內部。咱們指定了一個白色的 RGB 值, 它建立了一個橢圓環繞着遮罩文字。任何在橢圓內部都能穿過文字直接顯示,產生一種剪切輪廓的感受。

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* 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 修改一下文字, 修改一下文字,調整一下尺寸。

瀏覽器支持

在咱們使用這種新的處理圖像的方法以前，注意到瀏覽器對剪切和遮罩的支持不一致是很是重要的。剪切的支持程度比遮罩的高, 可是 IE 瀏覽器不徹底支持剪切，如今的瀏覽器對 CSS 遮罩的支持也很是有限,因此咱們建議在一些元素上使用這些特性來加強效果，這樣的話,若是用戶的瀏覽器不支持 , 它也不會影響到內容的查看體驗。

若是要測試和查看遮罩和剪切的支持程度，我建議在 JSFiddle 或 Codepen 編寫一個實例而後在不一樣的瀏覽器裏面測試， 不要由於這些限制讓你感到失望——它們老是很好領先的遊戲一旦支持的話就會變成主流,你將會確切的指導怎樣完全改變你的圖像, 當你感到困惑時, 必定要參考可信的引用網站 Can I Use.

在體驗過這些實例以後，這應該提供了一個關於遮罩和剪切的好的介紹。儘管如今瀏覽器支持程度頗有限,這將有可能在將來成爲一種主流實踐。思考怎麼使用這些技術建立一個有趣的視覺效果老是讓人感受愉快，網絡圖像的將來讓咱們能夠不依賴圖像編輯器，直接在瀏覽器平臺上更高效的去建立和修改圖像。