国产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元查看
<