HTML5中SVG蒙板及mask元素介紹與應(yīng)用是怎樣的-創(chuàng)新互聯(lián)

本篇文章給大家分享的是有關(guān)HTML5中SVG 蒙板及mask元素介紹與應(yīng)用是怎樣的，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

成都創(chuàng)新互聯(lián)公司專注于阿拉爾企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城建設(shè)。阿拉爾網(wǎng)站建設(shè)公司,為阿拉爾等地區(qū)提供建站服務(wù)。全流程按需制作網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

SVG支持的蒙板

SVG支持多種蒙板特效，使用這些特性，我們可以做出很多很炫的效果。至于中文中把mask叫做"蒙板"還是"遮罩"就不去區(qū)分了，這里都叫做蒙板吧。

SVG支持的蒙板類型：
1. 裁剪路徑(cliping path)

裁剪路徑是由path, text或者基本圖形組成的圖形。所有在裁剪路徑內(nèi)的圖形都可見，所有在裁剪路徑外的圖形都不可見。
2. 遮罩/蒙板(mask)

蒙板是一種容器，它定義了一組圖形并將它們作為半透明的媒介，可以用來(lái)組合前景對(duì)象和背景。
裁剪路徑和其他的蒙板一個(gè)重要的區(qū)別就是：裁剪路徑是1位蒙板，也就是說(shuō)裁剪路徑覆蓋的對(duì)象要么就是全透明(可見的，位于裁剪路徑內(nèi)部)，要么就是全不透明(不可見，位于裁剪路徑外部)。而蒙板可以指定不同位置的透明度。

視窗的裁剪路徑 - overflow和clip屬性

HTML元素的overflow屬性和clip屬性共同設(shè)置了該元素對(duì)內(nèi)容的剪裁行為。同樣的，在SVG中，這2個(gè)屬性還可以使用。

overflow = visible | hidden | scroll | auto | inherit
overflow屬性定義了當(dāng)元素的內(nèi)容超過(guò)元素的邊框的時(shí)候采取的行為。

這個(gè)屬性可以用于能創(chuàng)建新視窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。這個(gè)屬性的取值含義如下：
visible：顯示所有內(nèi)容，即使是內(nèi)容已經(jīng)在元素的邊框外邊，這個(gè)是默認(rèn)值。
hidden：隱藏超出裁剪路徑的內(nèi)容。裁剪路徑由clip屬性指定。
scroll：采用滾動(dòng)條的形式，呈現(xiàn)超出的內(nèi)容。
auto：采用瀏覽器定義的行為，這個(gè)似乎不太可靠。
這個(gè)屬性和CSS2中的同名屬性基本相同，只不過(guò)在SVG中，有一些不同的處理過(guò)程：
1.overflow屬性對(duì)于除了創(chuàng)建新視窗的元素(svg,symbol,image,foreignObject),pattern和marker元素外的元素都沒(méi)有效果。
2.裁剪路徑與視窗是對(duì)應(yīng)的，創(chuàng)建了新的視窗，就創(chuàng)建了新的裁剪路徑。默認(rèn)的裁剪路徑就是視窗邊界。
clip = <shape> | auto | inherit
clip屬性用于設(shè)置當(dāng)前視窗的裁剪路徑。

這個(gè)屬性可以用于能創(chuàng)建新視窗的元素(svg,symbol,image,foreignObject),pattern和marker元素。這個(gè)屬性和CSS2中同名屬性有一樣的參數(shù)。auto代表裁剪路徑與視窗邊框是一致的。當(dāng)使用圖形作為參數(shù)時(shí)(設(shè)置裁剪矩形的top,right,bottom和left的值)，可以使用用戶坐標(biāo)值(即不帶單位的坐標(biāo))。例如：

代碼如下:

P { clip: rect(5px, 10px, 10px, 5px); }

這里注意，默認(rèn)情況下(overflow和clip都取默認(rèn)值)，裁剪路徑是與視窗的邊框是一致的。當(dāng)設(shè)置了viewBox和preserveAspectRatio以后，通常也需要把clip裁剪路徑的四邊映射成viewBox的四邊，這樣才能保證某些顯示效果還是一樣的(當(dāng)然如果都是默認(rèn)值，就不用設(shè)了)。

對(duì)象的裁剪路徑 - clipPath元素
裁剪路徑使用clipPath元素定義，然后使用clip-path屬性引用。
clipPath可以包含path元素，text元素，基本的圖形元素(circle等)和use元素。如果是use元素，則它必須是直接引用path,text或者基本圖形元素，不能引用的是其他的元素。
注意裁剪路徑只是一位的遮罩層，該路徑是包含的所有的元素的并集。在這個(gè)集合中的對(duì)象就可以顯示，不在這個(gè)范圍內(nèi)的對(duì)象就不顯示。具體判定點(diǎn)在不在范圍內(nèi)的算法由"clip-rule"屬性指定。

對(duì)于圖形對(duì)象，裁剪路徑等于自己clip-path設(shè)置的裁剪路徑與所有外層元素的裁剪路徑(包括clip-path和overflow設(shè)置的裁剪路徑)的并集。注意幾點(diǎn)：
1.clipPath元素自身并不會(huì)從外層節(jié)點(diǎn)繼承clipPath定義的裁剪路徑。
2.clipPath元素自身可以設(shè)置clip-path屬性。效果是兩個(gè)路徑的交集。
3.clipPath元素的子元素可以設(shè)置clip-path屬性：效果是兩個(gè)路徑的并集。
4.空裁剪路徑會(huì)裁掉元素內(nèi)所有的內(nèi)容。
下面看看幾種重要的屬性：
clipPathUnits = "userSpaceOnUse(默認(rèn)值) | objectBoundingBox"
這個(gè)屬性定義了clipPath元素使用的坐標(biāo)系統(tǒng)，這兩個(gè)值我們都很熟悉了，分別是采用引用當(dāng)前裁剪路徑的元素的用戶坐標(biāo)系統(tǒng)和包圍盒比例值。
clipPath元素從來(lái)不直接渲染，都是通過(guò)clip-path被引用，所以設(shè)置clipPath元素的display屬性沒(méi)有作用。
clip-path = “<url(#裁剪路徑名)> | none inherit”
這個(gè)屬性不用多說(shuō)了，用于引用裁剪路徑，這里需要注意的是，所有的容器元素，基本圖形元素和clipPath元素都可以使用這個(gè)屬性。
clip-rule = "nonzero(默認(rèn)值) | evenodd | inherit"
這個(gè)屬性用于確定哪些點(diǎn)是屬于裁剪路勁內(nèi)部的點(diǎn)。對(duì)于簡(jiǎn)單的封閉圖形，這個(gè)很好判定，但是對(duì)于復(fù)雜的內(nèi)部有洞的圖形，就有區(qū)別了。這個(gè)屬性的取值與fill-rule的取值含義是一樣的：
nonzero：這個(gè)值采用的算法是：從需要判定的點(diǎn)向任意方向發(fā)射線，然后計(jì)算圖形與線段交點(diǎn)的處的走向；計(jì)算結(jié)果從0開始，每有一個(gè)交點(diǎn)處的線段是從左到右的，就加1；每有一個(gè)交點(diǎn)處的線段是從右到左的，就減1；這樣計(jì)算完所有交點(diǎn)后，如果這個(gè)計(jì)算的結(jié)果不等于0，則該點(diǎn)在圖形內(nèi)，需要填充；如果該值等于0，則在圖形外，不需要填充?？聪旅娴氖纠?/p>

HTML5中SVG 蒙板及mask元素介紹與應(yīng)用是怎樣的
evenodd：這個(gè)值采用的算法是：從需要判定的點(diǎn)向任意方向發(fā)射線，然后計(jì)算圖形與線段交點(diǎn)的個(gè)數(shù)，個(gè)數(shù)為奇數(shù)則改點(diǎn)在圖形內(nèi)，需要填充；個(gè)數(shù)為偶數(shù)則點(diǎn)在圖形外，不需要填充。看下圖的示例：

HTML5中SVG 蒙板及mask元素介紹與應(yīng)用是怎樣的
clip-rule屬性只能用于clipPath元素的內(nèi)部圖形元素。例如下面的設(shè)置是起作用的：

代碼如下:

如果元素不在clipPath中是不起作用的。例如下面的設(shè)置是不起作用的：

代碼如下:

最后看裁剪路徑的一個(gè)小例子：

代碼如下:

矩形只有左上角10*10的區(qū)域是可見的。

蒙板- mask元素
在SVG中，你可以為渲染的對(duì)象指定任何的圖形元素或者g元素作為蒙板，來(lái)將渲染對(duì)象組合到背景中。
蒙板用mask元素定義，使用蒙板的時(shí)候只需要在對(duì)象的mask屬性中引用蒙板就可以了。
mask元素可以包含任何的圖形元素和容器元素(例如g)。
蒙板的效果其實(shí)大家也比較清楚，基本就是根據(jù)蒙板中每個(gè)點(diǎn)的顏色和透明度計(jì)算出一個(gè)最終的透明度，然后在渲染對(duì)象的時(shí)候，在對(duì)象上面罩上這個(gè)帶有不同透明度的蒙板層，體現(xiàn)出蒙板的遮擋效果。對(duì)于渲染對(duì)象來(lái)說(shuō)，只有在蒙版內(nèi)的部分會(huì)按照蒙板上點(diǎn)的透明度來(lái)渲染，不在蒙板內(nèi)的部分不顯示?？聪旅娴睦樱?/p>

代碼如下:

效果如下圖所示：

HTML5中SVG 蒙板及mask元素介紹與應(yīng)用是怎樣的

大家可以試著將上面mask元素中的rect元素的width改成500，你會(huì)看到Text的一部分不顯示了，這就是因?yàn)槟遣糠忠呀?jīng)超出蒙板的范圍了。這里其實(shí)也看到了，上面的裁剪路徑只不過(guò)是一種特殊的蒙板(每個(gè)點(diǎn)的透明度要么是0，要么是1)。
蒙板的定義和使用已經(jīng)介紹了，下面看幾個(gè)重要的屬性：
maskUnits = "userSpaceOnUse | objectBoundingBox(默認(rèn)值)"
定義了mask元素中坐標(biāo)(x,y)和長(zhǎng)度(width,height)的坐標(biāo)系統(tǒng)：使用引用該蒙板的元素的用戶坐標(biāo)系，或者是使用相對(duì)于引用蒙板的元素的包圍盒的相對(duì)值。這個(gè)值的含義與前面章節(jié)中的單位含義是相同的。
maskContentUnits = "userSpaceOnUse(默認(rèn)值) | objectBoundingBox"
定義了mask元素中子元素的坐標(biāo)系統(tǒng)。
x, y, width, height
定義了蒙板的位置和大小，在默認(rèn)的objectBoundingBox坐標(biāo)下，默認(rèn)值分別為-10%,-10%,120%,120%。

此外要注意：蒙板不會(huì)直接渲染，只會(huì)在引用的地方起作用，所以display,opacity等屬性對(duì)于mask元素來(lái)說(shuō)都是不起作用的。

以上就是HTML5中SVG 蒙板及mask元素介紹與應(yīng)用是怎樣的，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：HTML5中SVG蒙板及mask元素介紹與應(yīng)用是怎樣的-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article6/dhiiig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、ChatGPT、企業(yè)網(wǎng)站制作、用戶體驗(yàn)、電子商務(wù)、全網(wǎng)營(yíng)銷推廣

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容