資訊專欄INFORMATION COLUMN
摘要：本文是基于精髓一書的簡單總結(jié)，文中的均為該書提供，目的是方便大家使用時快速查閱。允許指定一個給定的一組圖形伸展以適應特定的容器元素。該屬性的模型為指定軸和位置，由一個對齊方式和一個對齊方式組合而成。
本文是基于《SVG精髓》一書的簡單總結(jié)，文中的demo均為該書提供，目的是方便大家使用時快速查閱。1. 坐標系統(tǒng)
視口（viewport）：文檔使用的畫布區(qū)域，表示SVG可見區(qū)域的大小，通?？梢栽? 上使用 width 和 height 屬性確定視口的大小。
viewBox：允許指定一個給定的一組圖形伸展以適應特定的容器元素。這個屬性值由4個數(shù)值組成，viewBox =?
viewport寬高為4cm和5cm（畫布區(qū)域），viewBox的左上角(0, 0)與viewport重合，寬度是64個單位（每個單位1/16cm），高度是80個單位（每個單位1/16cm）。矩形rect的坐標是相對viewBox來定位的（如果沒有設(shè)置viewBox，默認坐標系統(tǒng)就是viewport）demo1
preserveAspectRatio：可以指定被縮放的圖像相對視口的對齊方式，以及是希望它適配邊緣還是要裁減。該屬性的模型為:
preserveAspectRatio = "alignment [meet | slice]"
alignment ：指定軸和位置，由一個x對齊方式和一個y對齊方式（min, mid, max）組合而成。默認為xMidYMid 。
| y對齊 | xMin | xMid | xMax |
|---|---|---|---|
| yMin | xMinYmin 視口左側(cè)邊緣、頂部邊緣對齊 |
xMidYmin 視口水平中心、頂部邊緣對齊 |
xMaxYmin 視口右側(cè)邊緣、頂部邊緣對齊 |
| yMid | xMinYmid 視口左側(cè)邊緣、垂直中心 |
xMidYmid 視口水平中心、垂直中心 |
xMaxYmid 視口右側(cè)邊緣、垂直中心 |
| yMax | xMinYmax 視口左側(cè)邊緣、底部邊緣對齊 |
xMidYmax 視口水平中心、底部邊緣對齊 |
xMaxYmax 視口右側(cè)邊緣、底部邊緣對齊 |
meet ：縮小圖像以適配可用的空間。
slice ：裁減圖像不適合視口的部分。
上面的例子中，viewport和viewBox的寬高是等比縮放的，如果比例不同，就有可能出現(xiàn)溢出demo2
SVG中的基本形狀
| 形狀 | 描述 |
|---|---|
| 從起始點(start-x, start-y) 畫一條線到 (end-x, end-y) demo | |
| 畫一個矩形，左上角位于(left-x, top-y)，寬高分別為width和height demo | |
| 以指定半徑radius畫一個圓，圓心位于(center-x, center-y) demo | |
| 畫一個橢圓，x方向半徑為x-radius，y方向半徑為y-radius， 圓心位于(center-x, center-y) | |
| 畫一個封閉圖形，輪廓由points-list指定，它由一系列x/y坐標對組成。 這些數(shù)值只能使用用戶坐標，不可以添加長度單位。 demo | |
| 畫一系列相連的折線段，折線點由points-list指定， 它由一系列x/y坐標對組成。 這些數(shù)值只能使用用戶坐標，不可以添加長度單位。 demo |
筆畫特性
| 屬性 | 值 |
|---|---|
| stroke | 筆畫顏色，默認為none demo |
| stroke-width | 筆畫寬度，可用用戶坐標或者指定單位的方式指定。 筆畫的寬度會相對坐標網(wǎng)格線居中。默認值為1 demo |
| stroke-opacity | 從0.0到1.0的數(shù)字。0.0是完全透明，1.0是完全不透明（默認值） demo |
| stroke-dasharray | 用一系列的數(shù)字來指定虛線和間隙的長度。 這些數(shù)字只能使用用戶坐標，默認值為none demo |
| stroke-linecap | 線頭尾的形狀，值為butt（默認值）、round或square demo |
| stroke-linejoin | 圖形的棱角或者一系列連線的狀態(tài)， 取值為miter（尖的，默認值），round或者bevel（平的） demo |
| stroke-miterlimit | 相交處顯示寬度與線寬的最大比例，默認值是4 demo |
填充特性
| 屬性 | 值 |
|---|---|
| fill | 填充顏色，默認值為black |
| fill-opacity | 從0.0到1.0的數(shù)字。0.0是完全透明，1.0是完全不透明（默認值） |
| fill-rule | 屬性值為nonzero（默認值）或evenodd。 該屬性決定判斷某個點是否在圖形內(nèi)部的方法。 只有當邊線交叉時或者內(nèi)部有“洞”時才有效。 |
????這里只介紹了該書的兩個章節(jié)，它們是理解學習SVG的基礎(chǔ)。接下來，我們將一起學習SVG里面常用的元素標簽和坐標系統(tǒng)變換。
原文鏈接：http://codesnote.com/svg_tuto...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51668.html
摘要：元素元素會將其所有子元素作為一個組合，通常組合還會有一個唯一的作為名稱。變換描述按照指定的和值移動用戶坐標系統(tǒng)。比例值可以是小數(shù)或則負數(shù)和相同按照指定的旋轉(zhuǎn)用戶坐標。旋轉(zhuǎn)中心由和指定根據(jù)指定的傾斜所有坐標。 3. 文檔結(jié)構(gòu) 在SVG中使用樣式（四種方式，可以聯(lián)想對照HTML樣式方法） 內(nèi)聯(lián)樣式, 直接在標簽里設(shè)置style屬性 內(nèi)部樣式表，可以同時為多個元素設(shè)置樣式 de...
摘要：元素元素會將其所有子元素作為一個組合，通常組合還會有一個唯一的作為名稱。變換描述按照指定的和值移動用戶坐標系統(tǒng)。比例值可以是小數(shù)或則負數(shù)和相同按照指定的旋轉(zhuǎn)用戶坐標。旋轉(zhuǎn)中心由和指定根據(jù)指定的傾斜所有坐標。 3. 文檔結(jié)構(gòu) 在SVG中使用樣式（四種方式，可以聯(lián)想對照HTML樣式方法） 內(nèi)聯(lián)樣式, 直接在標簽里設(shè)置style屬性 內(nèi)部樣式表，可以同時為多個元素設(shè)置樣式 de...
摘要：對象默認值填充對象屬性不存在時，使用運算符填充屬性不確定時避免報錯當檢索一個的值時，可以通過運算符來避免錯誤。例報錯先檢索是否為，后避免執(zhí)行后面報錯檢測對象中是否存在該屬性，不會查找該對象的原型鏈。 對象 默認值填充 對象屬性不存在時，使用||運算符填充：obj.name||lpp object屬性不確定時避免報錯 當檢索一個undefined的值時，可以通過 &&運算符來避免錯誤。例...
閱讀 2699·2021-11-25 09:43
閱讀 2500·2021-09-22 15:29
閱讀 1022·2021-09-22 15:17
閱讀 3682·2021-09-03 10:36
閱讀 2257·2019-08-30 13:54
閱讀 1781·2019-08-30 11:23
閱讀 1192·2019-08-29 16:58
閱讀 1320·2019-08-29 16:14
