svg的基本圖形與屬性【小尾巴的svg學(xué)習(xí)筆記1】

neroneroffy 發(fā)布于2019-04-23 13:30 / 2645人閱讀

摘要：因?yàn)轫?xiàng)目有可能用到所以學(xué)習(xí)了一下，做此筆記，圖截自慕課網(wǎng)，侵刪。下一個(gè)筆記將會(huì)描述在代碼里的實(shí)際應(yīng)用。

因?yàn)轫?xiàng)目有可能用到, 所以學(xué)習(xí)了一下，做此筆記，圖截自慕課網(wǎng)，侵刪。

一、基本圖形

　　1、矩形

　　　　x，y定義矩形的左上角坐標(biāo)；

　　　　width，height定義矩形的長(zhǎng)度和寬度；

　　　　rx，ry定義矩形的圓角半徑長(zhǎng)度，這里注意，如果rx給值了ry沒(méi)給值，ry沿用rx的值，反之同理；

　　2、圓形

　　　　cx與cy定義圓心的坐標(biāo)；

　　　　r為圓的半徑長(zhǎng)度；

　　3、橢圓

　　　　x，y依舊為圓心的坐標(biāo)；

　　　　橢圓相較于圓使半徑變?yōu)閮蓚€(gè)值，分別為：rx 橫向半徑和 ry 縱向半徑；

　　4、直線

　　　　這個(gè)較為簡(jiǎn)單，x1，y1為起點(diǎn)坐標(biāo)，x2，y2為終點(diǎn)坐標(biāo)

　　5、折線

　　　　points：坐標(biāo)，折線也較為簡(jiǎn)單，用空格或逗號(hào)間隔，依次寫下目標(biāo)點(diǎn)坐標(biāo)。

　　6、多邊形（閉合折線）

　　　　points：坐標(biāo)，基本與第五的折線相同，唯一不同的是多邊形會(huì)把最后一個(gè)點(diǎn)和起點(diǎn)連接起來(lái)

二、屬性

　　1、fill 填充顏色

　　2、stork 描邊顏色

　　3、stork-width 描邊粗細(xì)

　　4、transform 變形，位移（相較于父親）等

　　5、opacity 透明度

　　6、?fill-opacity 屬性定義填充顏色透明度（合法的范圍是：0 - 1）

　　7、 stroke-opacity 屬性定義筆觸顏色的透明度（合法的范圍是：0 - 1）

做得不夠詳細(xì)，下次會(huì)進(jìn)行補(bǔ)充，希望能對(duì)大家有一點(diǎn)點(diǎn)幫助。下一個(gè)筆記將會(huì)描述在代碼里的實(shí)際應(yīng)用。

云服務(wù)器 GPU云服務(wù)器 html的svg SVG _svg svg過(guò)渡

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1968.html

相關(guān)文章

《SVG精髓》筆記（一）

摘要：本文是基于精髓一書的簡(jiǎn)單總結(jié)，文中的均為該書提供，目的是方便大家使用時(shí)快速查閱。允許指定一個(gè)給定的一組圖形伸展以適應(yīng)特定的容器元素。該屬性的模型為指定軸和位置，由一個(gè)對(duì)齊方式和一個(gè)對(duì)齊方式組合而成。本文是基于《SVG精髓》一書的簡(jiǎn)單總結(jié)，文中的demo均為該書提供，目的是方便大家使用時(shí)快速查閱。 1. 坐標(biāo)系統(tǒng) 視口（viewport）：文檔使用的畫布區(qū)域，表示SVG可見(jiàn)區(qū)域的大...

warkiz 2019-08-01 18:21 評(píng)論0 收藏0
《SVG精髓》筆記（二）

摘要：元素元素會(huì)將其所有子元素作為一個(gè)組合，通常組合還會(huì)有一個(gè)唯一的作為名稱。變換描述按照指定的和值移動(dòng)用戶坐標(biāo)系統(tǒng)。比例值可以是小數(shù)或則負(fù)數(shù)和相同按照指定的旋轉(zhuǎn)用戶坐標(biāo)。旋轉(zhuǎn)中心由和指定根據(jù)指定的傾斜所有坐標(biāo)。 3. 文檔結(jié)構(gòu) 在SVG中使用樣式（四種方式，可以聯(lián)想對(duì)照HTML樣式方法）內(nèi)聯(lián)樣式, 直接在標(biāo)簽里設(shè)置style屬性內(nèi)部樣式表，可以同時(shí)為多個(gè)元素設(shè)置樣式 de...

My_Oh_My 2019-08-01 18:21 評(píng)論0 收藏0
《SVG精髓》筆記（二）

摘要：元素元素會(huì)將其所有子元素作為一個(gè)組合，通常組合還會(huì)有一個(gè)唯一的作為名稱。變換描述按照指定的和值移動(dòng)用戶坐標(biāo)系統(tǒng)。比例值可以是小數(shù)或則負(fù)數(shù)和相同按照指定的旋轉(zhuǎn)用戶坐標(biāo)。旋轉(zhuǎn)中心由和指定根據(jù)指定的傾斜所有坐標(biāo)。 3. 文檔結(jié)構(gòu) 在SVG中使用樣式（四種方式，可以聯(lián)想對(duì)照HTML樣式方法）內(nèi)聯(lián)樣式, 直接在標(biāo)簽里設(shè)置style屬性內(nèi)部樣式表，可以同時(shí)為多個(gè)元素設(shè)置樣式 de...

entner 2019-08-29 14:11 評(píng)論0 收藏0
翻譯 | 編寫SVG的口袋指南（上）

摘要：元素元素歸屬于容器和結(jié)構(gòu)元素，在文檔內(nèi)允許嵌套使用獨(dú)立的片段。如果包含葡萄的組被移動(dòng)到文檔的末尾，它將出現(xiàn)在西瓜的前面。例如，將葡萄的莖的路徑移動(dòng)到組的末尾將導(dǎo)致莖在頂部。作者：DDU（滬江前端開(kāi)發(fā)工程師）本文是原文翻譯，轉(zhuǎn)載請(qǐng)注明作者及出處。簡(jiǎn)介 Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語(yǔ)言。這些圖形由路徑，圖片和（或）文本組成，并能...

Brenner 2019-08-29 13:25 評(píng)論0 收藏0
翻譯 | 編寫SVG的口袋指南（上）

摘要：元素元素歸屬于容器和結(jié)構(gòu)元素，在文檔內(nèi)允許嵌套使用獨(dú)立的片段。如果包含葡萄的組被移動(dòng)到文檔的末尾，它將出現(xiàn)在西瓜的前面。例如，將葡萄的莖的路徑移動(dòng)到組的末尾將導(dǎo)致莖在頂部。作者：DDU（滬江前端開(kāi)發(fā)工程師）本文是原文翻譯，轉(zhuǎn)載請(qǐng)注明作者及出處。簡(jiǎn)介 Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語(yǔ)言。這些圖形由路徑，圖片和（或）文本組成，并能...

linkFly 2019-08-01 17:36 評(píng)論0 收藏0