SVG濾鏡及動畫效果 ／ 2-1 剪下

svg建立剪下： 擦除已經建立的元素的部分內容。  

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
        <clipPath id="cut-off-bottom"> 
            <rect x="0" y="0" width="200" height="100" /> 
        </clipPath> 
    </defs
 
> 
    <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> 
</svg>

 

svg剪下的意思就是把剪下的部分留下來，其他的沒有了。

 SVG濾鏡及動畫效果 ／ 2-2 漸變

漸變：

有兩種型別的漸變：線性漸變和徑向漸變。(道理和css3中漸變類似)

定義漸變：

必須給漸變內容指定一個id屬性，以供元素呼叫。為了讓漸變能被重複使用，漸變內容需要定義在<defs>標籤內部，而不是定義在形狀上面。

呼叫漸變：

<element fill="url(#id值)" stroke="url(#id值)" />

 

 

線性漸變： 沿著直線改變顏色。

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">

　　<defs>

　　　　<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">

　　　　　　<stop offset
 
="0%" stop-color="yellow" />

　　　　　　<stop offset="100%" stop-color="red" />

　　　　</linearGradient>

　　</defs>

　　<ellipse cx="200" cy="100" rx="100" ry="50" fill="url(#gradient)" />

</svg>

 

設定屬性：x1="" y1="" x2="" y2="" 分別表示開始點和結束點，裡面全部用百分比。

設定漸變<stop offset="百分比" stop-color="color"></stop> 為同一個節點設定兩個顏色，將會直接分離兩個顏色，沒有漸變效果。

 

徑向漸變：

<radialGradient>從一個點開始發散繪製漸變。

<svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">

　　<defs>

　　　　<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

　　　　　　<stop offset="0%" stop-color="yellow" />

　　　　　　<stop offset="100%" stop-color="red" />

　　　　</radialGradient>

　　</defs>

　　<ellipse cx="200" cy="100" rx="100" ry="50" fill="url(#gradient)" />

</svg>

 

1.在defs標籤下定義一個帶id的radialGradient,

2.設定屬性：cx="" cy="" r="" fx="" fy=""前面兩個表示漸變而產生的一個外圓的圓心，中間表示擴充套件半徑，fx和fy表示漸變的中心點 最後兩個屬性表示漸變內圓心起始點。

3.設定漸變<stop offset="百分比" stop-color="color"></stop>

4.需要漸變的圖形設定fill="url(#id)"

 SVG濾鏡及動畫效果 ／ 2-4 遮罩效果

遮罩效果：（被遮住但還存在） masking使用透明和灰度值遮罩計算得的軟邊緣。

遮罩效果可以漸變，但是剪下不行。

語法參照下圖

 

SVG濾鏡及動畫效果 ／ 2-5 嵌入光柵影象 

嵌入點陣圖，光柵影象。。

　　<image>允許在一個svg物件內部呈現光柵影象。

　　<image xlink:href="URL" x="x" y="y" width="width" height="height"/>

　特別說明：

　　如果沒有設定x或y屬性，它們自動被設定為0；

　　如果沒有設定height或width屬性，他們自動被設定為0；

　　width或height等於0，將不會呈現這個影象。

 

SVG濾鏡及動畫效果 ／ 3-2 animate

SMIL： synchronized Multimedia Integration Language——同步多媒體整合語言。

xml語言中的一種。

xml語言中沒有嚴格規範標籤是單標籤還是標籤對。當裡面要放東西，可以寫成標籤對，不放東西可以寫成單標籤。單標籤必須寫/號

 

 

svg動畫：

<set>

在特定事件後修改某個屬性值。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<circle cx="200" cy="200" r="50" style="fill:#ff6600" >

　　　　<set attributeName="r" attributeType="XML" to="80" begin="3s" />

　　</circle>

</svg>

 

attributeName屬性選定改變的屬性；

attributeType屬性型別；

to屬性設定變化後的值；

begin屬性設定什麼時候開始。

 

<animate>

基礎動畫元素，實現單屬性動畫過渡效果。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<circle cx="200" cy="200" r="50" style="fill:#ff6600">

　　　　<animate attributeName="r" from="50" to="80" begin="0s" dur="3s" />

　　</circle>

</svg>

 

dur屬性：執行整個動畫過程的時間；

from屬性：從某值開始。

 

<animateTransform>

實現transform變換動畫效果。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<circle cx="200" cy="200" r="50" style="fill:#ff6600" >

　　　　<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.5" />

　　</circle>

</svg>

 

type屬性：動畫變化型別，平移，縮放，旋轉；也是針對座標發生變化。必須寫。

 

 <animateMotion> 讓svg各種圖形沿著特定的path路徑運動。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<polygon points="-12 -69,-58 85,64 -14,-81 -14,41 85" style="fill: #ff6600;" >

　　　　<animateMotion path="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100" dur="3s" />

　　</polygon>

</svg>

 

rotate="auto";//沿著路徑移動的時候，自身也會帶有旋轉

 

 組合動畫：多個動畫組合於一個元素，構成複雜動畫。

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">

　　<circle cx="200" cy="200" r="50" style="fill:#ff6600" >

　　　　<animate attributeName="r" from="50" to="80" begin="0s" dur="3s" repeatCount="indefinite" />

　　　　<animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />

　　</circle>

</svg>

 

repeatCount="indefinite"//無限次重複。

SVG濾鏡及動畫效果 ／ 3-5 animate引數詳解

svg animation引數詳解：     attributeName=<attributeName>; 　　要變化的元素屬性名稱，可以是元素的屬性，也可以是css屬性。   attributeType="CSS | XML | auto"; 　　三個固定引數，CSS | XML | auto，表明attributeName屬性值的列表。優先css，如果碰到css和xml都有的屬性，最好把這個引數寫上。   from，to，by，values 　　from：動畫的起始值。 　　to：動畫的結束值。 　　by：動畫的相對變化值。（不能獨立存在，一定要有from） 　　values：用分號分隔的一個或多個值，可以看出是動畫的多個關鍵值點。 　　四種組合：from to；form by；to；values；   begin，end begin是指動畫開始的時間，end指動畫結束的時間； 　　begin="value1;value2"：values1s之後動畫走一下，value2s時候動畫在走以下； 　　offset-value：偏移值；（+1，-1） 　　synvbase-value：基於同步確定值；（+1,-1快一秒鐘，慢一秒種） 　　event-value：與時間相關聯的值； repeat-value：重複多少次之後執行； 　　accessKey-value：定義快捷鍵，按下某個按鍵動畫開始； 　　wallclock-sync-value：真實世界的時鐘時間定義； 　　indefinite：無限等待。    dur： 　　動畫持續時間，常規時間值或者"indefinite",預設為indefinite，在這裡時間無限相當於靜止。   calcMode，keyTimes，keySplines 控制動畫快慢曲線。 　　discrete：from值直接跳到to值； 　　linear：animationMotion元素以外的元素的calcMode預設值，動畫從頭到尾的速率都是一致的； 　　paced：通過插值讓動畫變化步調平穩均勻； 　　spline：插值定義貝塞爾曲線。   repeatCount，repeatDur： 　　repeatCount表示動畫執行次數； repeatDur定義重複動畫的總時間。   fill： 　　表示動畫間隙的填充方式； 　　remove：預設值，動畫結束直接回到開始的地方； 　　freeze：動畫結束後保持動畫結束之後的狀態。   accumulate="sum"; 　　連線動畫。預設值為none；動畫結束時候的位置作為下次動畫的起始位置。   additive="sum"; 　　同時執行多個動畫，第一個動畫可以不寫，後面的動畫都要寫。   w3c正在減少這些引數，並更提倡用css方式來寫   動畫的暫停： 　　svg.pauseAnimations(); 播放： 　　svg.unpauseAninmations();   svg中的動畫中的transform的rotate中的from和to兩個屬性中的值： 　　第一個代表的是旋轉的角度，第二個和第三個引數代表的是x和y的座標。

SVG濾鏡及動畫效果 ／ 4-1 在html中引入svg

使用svg檔案：

1，<embed>

　　使用embed標籤，將svg檔案以媒體形式插入html。

　　<embed src="xx.svg" width="1024" height="768" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />

　　從語法上來說，是引入了svg檔案，從審查元素來看，是將整個svg的結構巢狀到html中。

 

2，<object>

　　使用object標籤，將svg檔案以媒體物件形式插入html。

　　<object data="xxx.svg" width="1024" height="768" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/intall/" />

　　和embed的使用同理。

 

3，<iframe>;

　　像是網頁裡巢狀網頁

　　<iframe src="" width="" height=""></iframe>

 

4，<img src="">

　　將svg檔案以圖形影象檔案形式插入html。 最好的方式。

SVG濾鏡及動畫效果 ／ 4-2 嵌入SVG結構

嵌入svg結構： 　　使用svg標籤直接將svg程式碼插入到html中。 　　xmlns屬性不能省略