使用 CSS MARK 改變 SVG 背景色

2022-09-15 09:27:10 字數 696 閱讀 5908

這個屬性是相當強大的,詳細的介紹請到這裡檢視,它非常值得深入研究.

-webkit-mask 讓為乙個元素新增蒙板成為可能,從而你可以建立任意形狀的花樣。蒙板可以是 css3 漸變或者半透明的 png 。蒙板元素的 alpha 值為0的時候會覆蓋下面的元素,為1的時候會完全顯示下面的內容。相關的屬性有 -webkit-mask-clip 、 -webkit-mask-position 和 -webkit-mask-repeat 等,嚴重依賴來自於 background 中的語法。

可以如下新增 css **,讓 svg 作為蒙版圖:12

3456

.icon

svg 可以畫出各種形狀的圖形,使用十分方便,通過以下方法可以只改變css的背景顏色就改變 svg 的背景顏色。

html 結構:12

3456

7...css:12

3456

78910

11/*給每個 div 新增樣式,並使用 svg 最為蒙版背景*/

.icon

只要改變 div 背景顏色, svg 的顏色也會改變12

3456

.icon-red

.icon-orange

.icon-yellow

.icon-green

.icon-blue

demo

mask 屬性十分強大,但是需要最先進的瀏覽器支援。

svg基本使用

svg 檔案可通過以下標籤嵌入 html 文件 或者 矩形rect x,y width height 圓形circle cx,cy cr 橢圓ellipse cx,cy rx ry 線 line x1,y1,x2,y2 折線 polyline points x1,y1 x2,y2 xn,yn 多邊形...

簡單使用SVG

在前端的工作過程中經常會使用一些圖示。在之前我們曾用過兩種方式 純css,iconfont。使用是一種簡單的方式,然而卻有樣式不好調整,資源較大的缺點。純css只能實現較簡單的圖形,多用before after實現,優點是體積小,缺點是每次使用都是手寫,調整太浪費時間。iconfont是阿里的乙個圖...

Qt之SVG轉QPixmap並改變顏色

方法有兩種,使用qsvgrenderer與不使用qsvgrenderer 使用qt類將svg轉換為qpixmap格式是非常容易的,在qt文件中有些相關的例子,但是這些例子僅僅處理了螢幕裝置的標準畫素比為1的情況。如果你需要在高分屏上顯示影象,結果會有些不一樣。下面的函式傳入svg檔案的路徑,並根據第...