国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

SVG 新手入門

Baaaan / 2083人閱讀

摘要：創建開始建議添加一個空路徑的元素創建一個俄羅斯方塊一次添加一個命令，保存查看走向，這樣會可以方便創建出來第一，我們移動到，開始，這個是圖標的開始點。

svg 入門新認知 一、第一步創建設置svg

設置粗細 5px 的紅色線條繪制，圖標是無填充的

svg {
  stroke: #ff0000;
  stroke-width: 5;
  fill: none;
}
二、 創建一條直線。

使用 元素創建圖標

x1：起點的水平軸坐標

y1：起點的豎直軸坐標

x2：終點的水平軸坐標

y2：終點的豎直軸坐標

通過坐標（x1，y1）來確定線的起點開始，通過（x2,y2）來確定直線的終點

讓我們來創建第一條線，長為50px；起點為x1 = 10，y1 =10，則x2 = 60 ，y2 = 10
就可以看到一根直線平行于x軸

查看瀏覽器你會看到一條50px的紅色線條
當然可以創建多條不一樣的線條

效果如下

三、 創建折線

元素只有一個屬性：points；
我們來開始制作一個類似返回按鈕的箭頭，通過勾股定理來說比較明白些，我們要創建一個長度為50px的，那我們開始插入圖標就是（40，0），第二個就是（0，30）轉節點

接下來就是（40，30+30）那就是（40，60）為結點

同理得：結合上面的勾股定理可以得出下面效果


如果你不想這樣寫也可以這樣2種寫法寫

四、 創建矩形

使用 有4個需要提供值的屬性

x：左上角的 x 軸坐標值

y：左上角的 y 軸坐標值

width：矩形的寬度

height：矩形的高度

注意：你也可以使用屬性 rx 和 ry 來指定矩形的圓角半徑。

我們來創建一個正方形，左上角有一個偏移量3px，所以已x=“3”，y=“3”的屬性值，設置他的邊長為100px，則width=“100”，height=“100”

效果如下

我們進一步學習，結合上面的知識點創建一個田字，也可以自己深入研究其他圖標
五、創建圓

這個屬性類似上面一個，也需要4個屬性，這個和上面的不一樣的是，它是通過中心點來定位，而不像上面的通過左邊角來定位

cx：中心位置在 x 軸上的坐標

cy：中心位置在 y 軸上的坐標

rx：沿 x 軸向的半徑，也就是它會把圖形分割成上下兩部分

ry：沿 y 軸向的半徑，也就是它會把圖形分割成左右兩部分

現在設計一個100px和100px的圓，所以半徑為40px，則rx = “50” ry=“50”；同時又想和x，y相切，加上上面有3px偏移量，所以中心點為 53px，則cx =“53” cy=“53”來設置

這樣可以得到一個圓啦！！

進一步學習
弄一個奧迪汽車標志

六、 創建多邊形

元素和 元素幾乎一樣。都是采用點的值來設置組成一個圖案；它們不同之處是 折線 不是閉合的而多邊形 是自動閉合的

弄一個五變形的圖案

七、 通過指定點以及點和點之間的線來創建任意形狀

最靈活的生成 SVG 圖形的方法，但是也是最復雜的，即 元素
屬性d，d代表data，在這里，你將定義路徑的所有點和線。在這個屬性里，設置路徑點和在點之間創建連線的命令是由諸如 M 或 L 這樣的單個字母來提供的，然后是一組 x 和/或 y 坐標

的命令比較多，通常比較常用的是M、L、Z

  M 表示移動到（moveto），它用x,y值來確定起點

  L 表示劃線到（lineto）

  Z 表示閉合路徑。

創建開始建議添加一個空路徑的元素

創建一個俄羅斯方塊

一次添加一個命令，保存查看走向，這樣會可以方便創建出來；

第一，我們移動到（20，3）開始，這個是圖標的開始點。需要在屬性d里面添加一個命令 M 20 3

接著使用L命令在起點平行于x軸畫出一條60px的線段，所以命令為L 80 3；然后保存看看自己瀏覽器，你會看到一條直線；

然后用L 80 23 向下畫出一條20px直線垂直于x軸的線；

接著用L 60 23 向左畫出一條直線線，接著跟著 L 60 46

。。。。

最后一步直接用Z，它會自動閉合就出現上面的圖（俄羅斯方塊）
八、 元素

目的定義可復用的圖形，初始情況下 里面的內容是不可見的；
九、 創建組合對象

要把一個圖標轉為一個組合，用標簽 來包裹它，然后給它一個id
例如：
十、 放置組合

獲取在 中定義的復用對象并在 SVG 中顯示出來。

      
       
          
          
          
          
        


        
          
          
        

        
          
          
          
          
        
      

      
      
      
注意  標簽里面的x,y 是定義到特定的位置，通過href 獲取上面的圖標來使用

效果如下

十一、 創建模板對象

除開上面的組合方法，還有一個模板定義圖標；模板和組合幾乎一模一樣，但是你要額外設置控制制視口（viewbox）和長寬比。

如果你想要把我們目前創建的圖標設置為居中，圖標轉換成模板，然后使它們垂直填充100像素高的空間，并在這個空間中水平居中里面；

我們要將圖標代碼存放 模板中，然后給他們添加一個ID；同時添加一個屬性viewBox，屬性讓我們可以定義每個模板的可見部分應該是什么，前兩個定義圖標的左上角，第三和第四分別定義它的寬度和高度。

通過use調用

這個use 提供設置好寬度和高度為100px 的圖標
效果如下

總結：

通過設置元素包裹整個圖標

和創建線

創建矩形，實現田字，創建圓，實現一個奧迪標志， 創建多邊形實現五邊形，它門實現閉合的圖形

任意創建形狀，實現俄羅斯方塊

組合形狀，通過id標識形狀

使用 元素定義組合和模板

使用 元素來放置你定義的組合和模板。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116736.html

相關文章

  • SVG Sprite 入門（SVG圖標解決方案）

    摘要：關于瀏覽器圖標解決方案，一直就有很多以及相對而言矢量圖標以及支持瀏覽器自身解析的優點，很多團隊都已經在使用了。這篇文章主要說明圖標的使用和制作。在中可以在任何地方復用文件中定定義的的形，包括和已經。 showImg(https://segmentfault.com/img/bVvef3); 關于瀏覽器圖標解決方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...

    opengps 評論0 收藏0

  • SVG Sprite 入門（SVG圖標解決方案）

    摘要：關于瀏覽器圖標解決方案，一直就有很多以及相對而言矢量圖標以及支持瀏覽器自身解析的優點，很多團隊都已經在使用了。這篇文章主要說明圖標的使用和制作。在中可以在任何地方復用文件中定定義的的形，包括和已經。 showImg(https://segmentfault.com/img/bVvef3); 關于瀏覽器圖標解決方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...

    dance 評論0 收藏0

  • SVG 新手入門

    摘要：創建開始建議添加一個空路徑的元素創建一個俄羅斯方塊一次添加一個命令，保存查看走向，這樣會可以方便創建出來第一，我們移動到，開始，這個是圖標的開始點。 svg 入門新認知 一、第一步創建設置svg 設置粗細 5px 的紅色線條繪制，圖標是無填充的 svg { stroke: #ff0000; stroke-width: 5; fill: none; } 二、 創建...

    jubincn 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<