資訊專欄INFORMATION COLUMN
摘要：創(chuàng)建開始建議添加一個空路徑的元素創(chuàng)建一個俄羅斯方塊一次添加一個命令，保存查看走向，這樣會可以方便創(chuàng)建出來第一，我們移動到，開始，這個是圖標的開始點。
svg 入門新認知 一、第一步創(chuàng)建設(shè)置svg
設(shè)置粗細 5px 的紅色線條繪制，圖標是無填充的
svg {
stroke: #ff0000;
stroke-width: 5;
fill: none;
}
二、使用
x1：起點的水平軸坐標
y1：起點的豎直軸坐標
x2：終點的水平軸坐標
y2：終點的豎直軸坐標
通過坐標（x1，y1）來確定線的起點開始，通過（x2,y2）來確定直線的終點
讓我們來創(chuàng)建第一條線，長為50px；起點為x1 = 10，y1 =10，則x2 = 60 ，y2 = 10
就可以看到一根直線平行于x軸
查看瀏覽器你會看到一條50px的紅色線條
當然可以創(chuàng)建多條不一樣的線條
效果如下
我們來開始制作一個類似返回按鈕的箭頭，通過勾股定理來說比較明白些，我們要創(chuàng)建一個長度為50px的，那我們開始插入圖標就是（40，0），第二個就是（0，30）轉(zhuǎn)節(jié)點
接下來就是（40，30+30）那就是（40，60）為結(jié)點
同理得：結(jié)合上面的勾股定理可以得出下面效果
如果你不想這樣寫也可以這樣2種寫法寫
使用
x：左上角的 x 軸坐標值
y：左上角的 y 軸坐標值
width：矩形的寬度
height：矩形的高度
注意：你也可以使用屬性 rx 和 ry 來指定矩形的圓角半徑。
我們來創(chuàng)建一個正方形，左上角有一個偏移量3px，所以已x=“3”，y=“3”的屬性值，設(shè)置他的邊長為100px，則width=“100”，height=“100”
效果如下
我們進一步學習，結(jié)合上面的知識點創(chuàng)建一個田字，也可以自己深入研究其他圖標
五、
這個屬性類似上面一個，
cx：中心位置在 x 軸上的坐標
cy：中心位置在 y 軸上的坐標
rx：沿 x 軸向的半徑，也就是它會把圖形分割成上下兩部分
ry：沿 y 軸向的半徑，也就是它會把圖形分割成左右兩部分
現(xiàn)在設(shè)計一個100px和100px的圓，所以半徑為40px，則rx = “50” ry=“50”；同時又想和x，y相切，加上上面有3px偏移量，所以中心點為 53px，則cx =“53” cy=“53”來設(shè)置
這樣可以得到一個圓啦?。?/p>
進一步學習
弄一個奧迪汽車標志
六、
弄一個五變形的圖案
七、
最靈活的生成 SVG 圖形的方法，但是也是最復(fù)雜的，即
屬性d，d代表data，在這里，你將定義路徑的所有點和線。在這個屬性里，設(shè)置路徑點和在點之間創(chuàng)建連線的命令是由諸如 M 或 L 這樣的單個字母來提供的，然后是一組 x 和/或 y 坐標
M 表示移動到（moveto），它用x,y值來確定起點
L 表示劃線到（lineto）
Z 表示閉合路徑。
創(chuàng)建開始建議添加一個空路徑的元素
創(chuàng)建一個俄羅斯方塊
一次添加一個命令，保存查看走向，這樣會可以方便創(chuàng)建出來；
第一，我們移動到（20，3）開始，這個是圖標的開始點。需要在屬性d里面添加一個命令 M 20 3
接著使用L命令在起點平行于x軸畫出一條60px的線段，所以命令為L 80 3；然后保存看看自己瀏覽器，你會看到一條直線；
然后用L 80 23 向下畫出一條20px直線垂直于x軸的線；
接著用L 60 23 向左畫出一條直線線，接著跟著 L 60 46
。。。。
最后一步直接用Z，它會自動閉合就出現(xiàn)上面的圖（俄羅斯方塊）
八、
目的定義可復(fù)用的圖形，初始情況下
九、
要把一個圖標轉(zhuǎn)為一個組合，用標簽
例如：
十、
獲取在
注意
效果如下
除開上面的組合方法，還有一個模板定義圖標；模板和組合幾乎一模一樣，但是你要額外設(shè)置控制制視口（viewbox）和長寬比。
如果你想要把我們目前創(chuàng)建的圖標設(shè)置為居中，圖標轉(zhuǎn)換成模板，然后使它們垂直填充100像素高的空間，并在這個空間中水平居中里面；
我們要將圖標代碼存放
通過use調(diào)用
這個use 提供設(shè)置好寬度和高度為100px 的圖標
效果如下
通過設(shè)置
使用
使用
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54552.html
摘要：關(guān)于瀏覽器圖標解決方案，一直就有很多以及相對而言矢量圖標以及支持瀏覽器自身解析的優(yōu)點，很多團隊都已經(jīng)在使用了。這篇文章主要說明圖標的使用和制作。在中可以在任何地方復(fù)用文件中定定義的的形，包括和已經(jīng)。 showImg(https://segmentfault.com/img/bVvef3); 關(guān)于瀏覽器圖標解決方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
摘要：關(guān)于瀏覽器圖標解決方案，一直就有很多以及相對而言矢量圖標以及支持瀏覽器自身解析的優(yōu)點，很多團隊都已經(jīng)在使用了。這篇文章主要說明圖標的使用和制作。在中可以在任何地方復(fù)用文件中定定義的的形，包括和已經(jīng)。 showImg(https://segmentfault.com/img/bVvef3); 關(guān)于瀏覽器圖標解決方案，一直就有很多 CSS Sprite,Icon Font,CSS Icon...
閱讀 3567·2021-11-22 15:11
閱讀 4655·2021-11-18 13:15
閱讀 2714·2019-08-29 14:08
閱讀 3588·2019-08-26 13:49
閱讀 3105·2019-08-26 12:17
閱讀 3298·2019-08-26 11:54
閱讀 3122·2019-08-26 10:58
閱讀 2041·2019-08-26 10:21
