CSS3中SVG簡單應用

這是火焰遮罩效果圖，順著案例簡單講一下svg的簡單應用

html部分：

火焰背景遮罩字title>

rel="stylesheet"

href="css/fire.css">

head>

css部分（fire.css）：

.text

/*其他的樣式*/
html,body
body
svg

首先講一下我自己理解的原理步驟：

1、svg向量圖形,裡面包括可見檢視pattern（包含火焰image）、文字text

2、匯入xlink，設定寬高；此時看不見（靠想象）

3、用viewbox=」0 0 100 100」,表示座標為(0,0)的點出發，寬高為100的框框，然後將該框框內鎖定的元素（就是剛才的火焰）放大至整個pattern；設定pattern寬高，x，y是設定位置

4、在css中設定樣式，用pattern鋪滿文本；(fill)

5、然後在svg中設定框框選中整個字，放大至svg大小；(viewbox)

現在詳細講一下各個標籤的作用以及標籤屬性

1、svg標籤：建立乙個svg文件片段

viewbox=「x,y,width,height」 座標(x,y)作為起始點圈出乙個框框，然後將框框，連同框框中的元素一起放大至整個svg大小；width為正數，表示起始點往右的寬度；height為正，則往下；

id=」用於引用這個模式的唯一id」 必需的。

viewbox=」x,y.width,height」 與上面相同

patternunits=」userspaceonuse』或』objectboundingbox」。

第二個值x，y，width，height， 乙個會使用模式物件的邊框的小部分，單位（％）。」

patterncontentunits=「『userspaceonuse』或 『objectboundingbox』」

patterntransform=」允許整個表示式進行轉換」

width=」模式平鋪的寬度（預設為100％）」

height=」模式平鋪的高度（預設為100％）」

x=」模式的偏移量，來自左上角（預設為0）」 //用於定位該模式

y=」模式的偏移量，來自左上角（預設為0）」

xlink:href=」另一種模式，其屬性值是預設值以及任何子類可以繼承。遞迴」

xlink：href=」影象路徑」 ,必需

width=」影象的寬度」，必需

height=」影象的高度」，必需

x=」影象的左上角的x軸座標」

y=」影象的左上角的y軸座標」

x=」列表在x軸的位置。」

y=「列表在y軸的位置」

dx=」在字元的長度列表中移動相對最後繪製識別符號號的絕對位置」

dy=」在字元的長度列表中移動相對最後繪製識別符號號的絕對位置」

CSS3簡單動畫

css3的動畫確實非常絢麗！瀏覽器相容性很重要！分享兩個小動畫 doctype html html lang en head meta charset utf 8 meta name generator content editplus meta name author content meta n...

CSS3學習 初步應用

css是由選擇器 selector 與樣式規則 rule 組成 和jquery相似 而選擇器是指css樣式要應用的目標。當不同的選擇器寫在一起的時候，中間用逗號 隔開即可 當有多個樣式規則時，中間用分號 隔開。下面進行演示 首先在對應的css檔案中對要修飾的物件進行定義 text style1然後在...

css3 常見應用 2018 5 19

2 背景 設定為背景 可以對body設定背景圖 background url i bg flower.gif background size 63px 100px 多個背景圖 background image url bg flower.gif url bg flower 2.gif 可以指定到指定...