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