SVG圖形引用、裁切、蒙版，svg裁切

最後更新：2016-10-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

SVG圖形引用、裁切、蒙版，svg裁切

SVG圖形引用、裁切、蒙版，使用三個標籤：

1. <use>標籤建立圖形引用
2. <clipPath>標籤裁切圖形
3. <mask>標籤建立蒙版

<use>標籤

<use>標籤使用URI引用一個<g>,<svg>或其他具有一個唯一的ID屬性和重複的圖形元素。複製的是原始的元素，因此檔案中的原始存在只是一個參考，原始影響到所有副本的任何改變。

<use>標籤，使用xlink:href屬性引用圖形，xlink:href="#id" 。

例子：

<!DOCTYPE html><html>     <head>          <meta charset="UTF-8">          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">          <meta name="viewport" content="width=device-width, initial-scale=1.0">          <title>SVG-demo</title>          <style>               html,body{                    width:100%;                    height:100%;                    margin:0;                    padding:0;               }          </style>     </head><body>   <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">     <rect id="rU" x="0" y="0" width="100" height="100" fill="red" />     <text x="50" y="50" text-anchor="middle" fill="white">原型</text>     <use xlink:href="#rU" y="120"/>     <text x="50" y="180" text-anchor="middle" fill="white">簡單引用</text>     <use xlink:href="#rU" y="240" fill="green"/>     <text x="50" y="300" text-anchor="middle" fill="white">改fill綠色</text>     <use xlink:href="#rU" x="120" y="0" width="50" height="50"/>     <text x="170" y="50" text-anchor="middle" fill="white">設小寬高</text>     <use xlink:href="#rU" x="120" y="120" width="200" height="200"/>     <text x="170" y="180" text-anchor="middle" fill="white">設大寬高</text>     <use xlink:href="#rU" x="120" y="240" style="background:green;"/>     <text x="170" y="300" text-anchor="middle" fill="white">設定樣式</text>     <use xlink:href="#rU" x="240" y="0" stroke="blue" stroke-width="2" />     <text x="290" y="50" text-anchor="middle" fill="white">額外邊框</text></svg></body></html>

效果：

結論：

從上面代碼可以得出，原型已經設定的屬性，引用會繼承，並且不能覆蓋，除了x、y。所以想引用能夠設某個屬性，那原型就不能設定。

<clipPath>標籤<clipPath>標籤用來定義裁剪路徑，標籤內可建立任意數量的基本形狀，包括<path>和<text>元素。圖形使用clip-path屬性來引用clipPath來做裁切， clip-path="url(#clip-id)" 。clip-ruleclip-rule = "nonzero(預設值) | evenodd | inherit"
這個屬性用於確定哪些點是屬於裁剪路勁內部的點。對於簡單的封閉圖形，這個很好判定，但是對於複雜的內部有洞的圖形，就有區別了。這個屬性的取值與fill-rule的取值含義是一樣的。PS：fill-rule計算方式可以查看：http://blog.csdn.net/cuixiping/article/details/7848369 例子：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">     <defs>          <clipPath id="c-star">               <polygon points="150 100 179.389 9.54915 102.447 65.4509
　　　　　　　　　    197.533 65.4509 120.611 9.54915"/>          </clipPath>          <clipPath id="c-star-rule">               <polygon points="150 100 179.389 9.54915 102.447 65.4509 197.533 
                   65.4509 120.611 9.54915" transform="translate(-100)" clip-rule="evenodd"/>          </clipPath>          <clipPath id="c-two-grap">               <polygon points="150 100 179.389 9.54915 102.447 65.4509 
　　　　　　　　     197.533 65.4509 120.611 9.54915" transform="translate(0, 100)" />               <rect x="100" y="100" width="50" height="50" />          </clipPath>     </defs>     <rect x="100" y="0" fill="red" width="100" height="100" clip-path="url(#c-star)"/>     <rect x="0" y="0" fill="green" width="100" height="100" clip-path="url(#c-star-rule)"/>     <rect x="100" y="100" fill="blue" width="100" height="100" clip-path="url(#c-two-grap)"/></svg>

效果： 結論：所有在裁剪路徑內的圖形都可見，所有在裁剪路徑外的圖形都不可見。

<mask>標籤

蒙板（mask）是一種容器，它定義了一組圖形並將它們作為半透明的媒介，可以用來組合前景對象和背景。

裁剪路徑和其他的蒙板一個重要的區別就是：裁剪路徑是1位蒙板，也就是說裁剪路徑覆蓋的對象要麼就是全透明(可見的，位於裁剪路徑內部)，要麼就是全不透明(不可見，位於裁剪路徑外部)。而蒙板可以指定不同位置的透明度。

例子：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">     <defs>          <linearGradient id="Gradient" gradientUnits="userSpaceOnUse" 
　　　　　　　　x1="0" y1="0" x2="800" y2="0">               <stop offset="0" stop-color="white" stop-opacity="0" />               <stop offset="1" stop-color="white" stop-opacity="1" />          </linearGradient>          <mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300">               <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)" />          </mask>          <mask id="Mask2" maskUnits="userSpaceOnUse" x="0" y="0" width="800" height="300">               <rect x="0" y="0" width="800" height="300" fill="red" />          </mask>          <text id="Text" x="400" y="200" font-family="Verdana" font-size="100" 
　　　　　　　　text-anchor="middle" >               Masked text          </text>     </defs>     <rect x="0" y="0" width="800" height="300" fill="none" />     <use xlink:href="#Text" fill="blue" y="-100" />     <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />     <use xlink:href="#Text" fill="blue" mask="url(#Mask2)" y="100" /></svg>

效果：

結論：

蒙板的效果，基本就是根據蒙板中每個點的顏色和透明度計算出一個最終的透明度，然後在渲染對象的時候，在對象上面罩上這個帶有不同透明度的蒙板層，體現出蒙板的遮擋效果。

總結

關於蒙板的，我還是有個疑問，就是這個計算透明度的具體方式。這個問題牽涉出每個點的顏色跟最終的透明度的關係，是否存在某些顏色算出的最終的透明度是一樣的（我在嘗試蒙板代碼時，發現Mask2隻要不是設定黑白，其他顏色的效果都一樣）。

參考文獻

1. http://www.jb51.net/html5/72268.html

2. http://blog.csdn.net/cuixiping/article/details/7848369

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。

本文地址：http://www.cnblogs.com/lovesong/p/6006264.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

SVG圖形引用、裁切、蒙版，svg裁切

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support