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-rule
clip-rule = "nonzero(默認值) | evenodd | inherit"
這個屬性用於確定哪些點是屬於裁剪路勁內部的點。對於簡單的封閉圖形，這個很好判定，但是對於復雜的內部有洞的圖形，就有區別了。這個屬性的取值與fill-rule的取值含義是一樣的。
這個屬性用於確定哪些點是屬於裁剪路勁內部的點。對於簡單的封閉圖形，這個很好判定，但是對於復雜的內部有洞的圖形，就有區別了。這個屬性的取值與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
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。