龍媒SEO專注高端網站建設,網站優化,營銷型網站設計
微信:sh99002313  電話:189 6217 7230

蘇州高端網站設計
Our toughts in one place

簡單svg動畫,新手教程

發布者:龍媒SEO 來源: 時間:2019-05-13 查看:1902次

一、將svg嵌入到html中

  svg是指可伸縮矢量圖形,它使用XML格式定義圖像。在html中可以使用標簽直接嵌入svg代碼,例如:

 

svg標簽中的屬性:

  • version:表示svg的版本,目前只能有1.0、1.1兩種

  • xmlns="http://www.w3.org/2000/svg":固定值,表示命名空間

  • xmlns:xlink="http://www.w3.org/1999/xlink":固定值,表示命名空間

  • xml:space="preserve":保留所有的空格、TAB、回車鍵

 

二、svg中的形狀

  svg提供了一些預定義的形狀,例如:矩形(rect)、圓形(circle)、橢圓(ellipse)、線(line)、折線(polyline)、多邊形(polygon)、路徑(path)等,你可以像下面這樣繪制一個圓角矩形:


    

 

效果如下:

 

三、svg圖形的樣式

  在svg中,可以使用被提供的屬性來定義樣式,也可以使用css定義樣式,不過建議使用后一種。


    

 

  以上代碼的效果跟前面的相同。

svg圖形可使用的css樣式包括以下幾種:

CSS屬性描述
fill設置圖形的填充顏色
fill-opacity設置圖形填充顏色的透明度
fill-rule設置圖形的填充規則
marker設置這個圖形上沿直線(邊)使用的marker
marker-start設置這個圖形上沿直線(邊)使用的開始marker
marker-mid設置這個圖形上沿直線(邊)使用的中間marker
marker-end設置這個圖形上沿直線(邊)使用的結束marker
stroke設置圖形的描邊顏色
stroke-dasharray設置使用虛線來對圖形進行描邊
stroke-dashoffset設置圖形描邊虛線的偏移值
stroke-linecap設置描邊線條線頭的類型??蛇x擇有round, butt 和 square
stroke-miterlimit設置描邊的斜接限制
stroke-opacity設置描邊的透明度
stroke-width設置描邊的寬度
text-rendering設置描邊的text-rendering屬性

 

四、svg線條動畫

1、stroke-dasharray屬性:使用虛線來對圖形描邊。如果只有一個參數"a",則先畫"a"px的實線,再畫"a"px的虛線;如果有兩個參數"a,b",第一個參數"a"代表實線的長度,第二參數"b"代表虛線的長度;如果有三個參數"a,b,c",這種情況下,數字會循環兩次,首先畫"a"px實線,"b"px虛線,"c"px實線,然后畫"a"px虛線,"b"px實線,"c"px虛線。

復制代碼


   
   
   

復制代碼

 

  效果如下:

 

 

2、stroke-dashoffset屬性:設置描邊虛線的偏移值。

復制代碼


   
   
   

復制代碼

 

  效果如下:

 

當實線和虛線的長度足夠大時,配合stroke-dasharray和stroke-dashoffset屬性可以畫出長短不一的實線:

最后,stroke-dasharray和stroke-dashoffset屬性同時也是css樣式,可以用css animation動畫控制stroke-dashoffset屬性的值,動態改變線條的長度。

示例:

 

另外,你也可以使用svg的path路徑創建復雜圖案,實現更酷炫的動畫;


標簽:
少妇人妻在线无码天堂视频网_永久免费观看国产裸体美女_国产网红主播无码精品视频_久久久久久久精品免费看