国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

SVG蒙版的使用

DesGemini / 3219人閱讀

摘要：蒙版需要引入圖片，如果要引入圖片那還不如直接叫把這每個(gè)進(jìn)度的圖給我算了，又覺得小題大做，所以這里使用蒙版。代碼實(shí)現(xiàn)首先畫出蒙版圖形標(biāo)簽用于自定義形狀，它內(nèi)部的代碼不會(huì)顯示，僅供引用。

起因

最近做需求時(shí)發(fā)現(xiàn)有個(gè)這樣的UI圖

第一眼看到這圖時(shí)腦子就像著用著幾個(gè)div加border-radio來實(shí)現(xiàn)，仔細(xì)一看發(fā)現(xiàn)這個(gè)圖形整體的背景色是帶漸變的，那就不能用幾個(gè)元素去拼湊了，這只能用于單一背景色的圖形。

整體帶漸變背景色就需要用一個(gè)元素去畫出這個(gè)圖形，但是這太麻煩了，還有一種方法就是使用蒙版。前端中蒙版有CSS蒙版，SVG蒙版，Canvas蒙版。CSS蒙版需要引入圖片，如果要引入圖片那還不如直接叫UI把這每個(gè)進(jìn)度的圖給我算了，Canvas又覺得小題大做，所以這里使用SVG蒙版。

代碼實(shí)現(xiàn)

首先畫出蒙版圖形
標(biāo)簽用于自定義形狀，它內(nèi)部的代碼不會(huì)顯示，僅供引用。rx，ry為矩形圓角邊框。
標(biāo)簽為遮罩元素，可將SVG元素當(dāng)做蒙版顯示，白色為全透明，黑色為不透明。

再定義下漸變色

再畫個(gè)矩形，并引入蒙版

注意該元素的位置要在蒙版元素位置內(nèi)才能看到效果

效果完成

大體上差不多了，在進(jìn)度顯示上只要控制蒙版矩形的寬和圓的個(gè)數(shù)就可以了。

SVG還有組的概念，試了下在組上加入漸變，結(jié)果不行。
標(biāo)簽用于將多個(gè)形狀組成一個(gè)組（group)。

然而不行，相當(dāng)于在每個(gè)元素上加了個(gè)漸變。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54228.html

相關(guān)文章

  • SVG蒙版(mask)的基礎(chǔ)使用教程

    摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創(chuàng)建紅色前景和藍(lán)色背景在中使用蒙版需要在使用前在中定義并為其設(shè)置一個(gè)唯一，然后在需要應(yīng)用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會(huì)產(chǎn)生透明度的漸變。 蒙版工作原理 設(shè)計(jì)師或者會(huì)用Sketch、Photoshop一類設(shè)計(jì)工具的朋友應(yīng)該都了解蒙版(mask)這個(gè)東西。接下來我先以Photoshop為例，簡單解釋蒙版的工作原...

    Pines_Cheng 評(píng)論0 收藏0

  • SVG蒙版(mask)的基礎(chǔ)使用教程

    摘要：接下來我先以為例，簡單解釋蒙版的工作原理。先創(chuàng)建紅色前景和藍(lán)色背景在中使用蒙版需要在使用前在中定義并為其設(shè)置一個(gè)唯一，然后在需要應(yīng)用蒙版的元素上添加一條屬性。在蒙版中的黑白漸變，應(yīng)用到彩色圖層上就會(huì)產(chǎn)生透明度的漸變。 蒙版工作原理 設(shè)計(jì)師或者會(huì)用Sketch、Photoshop一類設(shè)計(jì)工具的朋友應(yīng)該都了解蒙版(mask)這個(gè)東西。接下來我先以Photoshop為例，簡單解釋蒙版的工作原...

    LittleLiByte 評(píng)論0 收藏0

  • SVG

    摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開發(fā)者第一次接觸手寫那種，雖然很多情況都有設(shè)計(jì)師使用來完成這項(xiàng)工作，但還是不排除需要利用到的每個(gè)元素。輕量級(jí)，具備靈活的來自團(tuán)隊(duì)，全球非常出名的可視化團(tuán)隊(duì)。于是筆者嘗試著把移植到中。 使用SVG + CSS實(shí)現(xiàn)動(dòng)態(tài)霓虹燈文字效果 早上無意間進(jìn)入一個(gè)網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動(dòng)畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...

    104828720 評(píng)論0 收藏0

  • 【小案例】基于色鍵技術(shù)的純客戶端實(shí)時(shí)蒙版彈幕

    摘要：組件提供了一系列的操作接口以方便用戶對(duì)彈幕的相關(guān)特性進(jìn)行定制。對(duì)于這種類型的圖像，我們可以使用色鍵的方式進(jìn)行摳圖生成蒙版。其中，用于更新蒙版的接口為。 導(dǎo)讀：本文內(nèi)容是筆者最近實(shí)現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個(gè)延伸。在閱讀本文的實(shí)例和相關(guān)代碼之前，不妨先瀏覽項(xiàng)目文檔，對(duì)組件的使用方式和相關(guān)接口進(jìn)行了解。 各位童鞋如果經(jīng)常上 B 站（bilibili.com） ...

    muzhuyu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<