《SVG精髓》筆記（一）

warkiz 發布于2019-08-01 18:21 / 2846人閱讀

摘要：本文是基于精髓一書的簡單總結，文中的均為該書提供，目的是方便大家使用時快速查閱。允許指定一個給定的一組圖形伸展以適應特定的容器元素。該屬性的模型為指定軸和位置，由一個對齊方式和一個對齊方式組合而成。

本文是基于《SVG精髓》一書的簡單總結，文中的demo均為該書提供，目的是方便大家使用時快速查閱。

1. 坐標系統

視口（viewport）：文檔使用的畫布區域，表示SVG可見區域的大小，通常可以在上使用 width 和 height 屬性確定視口的大小。

viewBox：允許指定一個給定的一組圖形伸展以適應特定的容器元素。這個屬性值由4個數值組成，viewBox =????，分別代表想要疊加在視口上的用戶坐標系統的最小x坐標、最小y坐標、寬度和高度。（可以理解為SVG內元素定位的真實坐標系統）

viewport寬高為4cm和5cm（畫布區域），viewBox的左上角(0, 0)與viewport重合，寬度是64個單位（每個單位1/16cm），高度是80個單位（每個單位1/16cm）。矩形rect的坐標是相對viewBox來定位的（如果沒有設置viewBox，默認坐標系統就是viewport）demo1

preserveAspectRatio：可以指定被縮放的圖像相對視口的對齊方式，以及是希望它適配邊緣還是要裁減。該屬性的模型為:

preserveAspectRatio = "alignment [meet | slice]"

alignment ：指定軸和位置，由一個x對齊方式和一個y對齊方式（min, mid, max）組合而成。默認為xMidYMid 。

y對齊	xMin	xMid	xMax
yMin	xMinYmin 視口左側邊緣、頂部邊緣對齊	xMidYmin 視口水平中心、頂部邊緣對齊	xMaxYmin 視口右側邊緣、頂部邊緣對齊
yMid	xMinYmid 視口左側邊緣、垂直中心	xMidYmid 視口水平中心、垂直中心	xMaxYmid 視口右側邊緣、垂直中心
yMax	xMinYmax 視口左側邊緣、底部邊緣對齊	xMidYmax 視口水平中心、底部邊緣對齊	xMaxYmax 視口右側邊緣、底部邊緣對齊

meet ：縮小圖像以適配可用的空間。
slice ：裁減圖像不適合視口的部分。

上面的例子中，viewport和viewBox的寬高是等比縮放的，如果比例不同，就有可能出現溢出demo2

2. 基本形狀

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坐標對組成。這些數值只能使用用戶坐標，不可以添加長度單位。 demo
	畫一系列相連的折線段，折線點由points-list指定，它由一系列x/y坐標對組成。這些數值只能使用用戶坐標，不可以添加長度單位。 demo

筆畫特性

屬性	值
stroke	筆畫顏色，默認為none demo
stroke-width	筆畫寬度，可用用戶坐標或者指定單位的方式指定。筆畫的寬度會相對坐標網格線居中。默認值為1 demo
stroke-opacity	從0.0到1.0的數字。0.0是完全透明，1.0是完全不透明（默認值） demo
stroke-dasharray	用一系列的數字來指定虛線和間隙的長度。這些數字只能使用用戶坐標，默認值為none demo
stroke-linecap	線頭尾的形狀，值為butt（默認值）、round或square demo
stroke-linejoin	圖形的棱角或者一系列連線的狀態，取值為miter（尖的，默認值），round或者bevel（平的） demo
stroke-miterlimit	相交處顯示寬度與線寬的最大比例，默認值是4 demo

填充特性

屬性	值
fill	填充顏色，默認值為black
fill-opacity	從0.0到1.0的數字。0.0是完全透明，1.0是完全不透明（默認值）
fill-rule	屬性值為nonzero（默認值）或evenodd。該屬性決定判斷某個點是否在圖形內部的方法。只有當邊線交叉時或者內部有“洞”時才有效。

????這里只介紹了該書的兩個章節，它們是理解學習SVG的基礎。接下來，我們將一起學習SVG里面常用的元素標簽和坐標系統變換。

原文鏈接：http://codesnote.com/svg_tuto...

GPU云服務器云服務器學習筆記一 javascript精髓基礎java的精髓 SVG

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

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

《SVG精髓》筆記（二）

摘要：元素元素會將其所有子元素作為一個組合，通常組合還會有一個唯一的作為名稱。變換描述按照指定的和值移動用戶坐標系統。比例值可以是小數或則負數和相同按照指定的旋轉用戶坐標。旋轉中心由和指定根據指定的傾斜所有坐標。 3. 文檔結構在SVG中使用樣式（四種方式，可以聯想對照HTML樣式方法）內聯樣式, 直接在標簽里設置style屬性內部樣式表，可以同時為多個元素設置樣式 de...

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

摘要：元素元素會將其所有子元素作為一個組合，通常組合還會有一個唯一的作為名稱。變換描述按照指定的和值移動用戶坐標系統。比例值可以是小數或則負數和相同按照指定的旋轉用戶坐標。旋轉中心由和指定根據指定的傾斜所有坐標。 3. 文檔結構在SVG中使用樣式（四種方式，可以聯想對照HTML樣式方法）內聯樣式, 直接在標簽里設置style屬性內部樣式表，可以同時為多個元素設置樣式 de...

entner 2019-08-29 14:11 評論0 收藏0
SVG 動畫精髓

摘要：如圖這種動畫是怎么實現呢直接看代碼吧這么多，是不是感覺有點懵逼。該值表示每個動畫間使用自定的貝塞爾變換曲線。該值用來具體定義動畫執行時的貝塞爾曲線。當然，里面的貝塞爾曲線組數為整個動畫幀數。 TL;DR 本文主要是講解關于 SVG 的一些高級動畫特效，比如 SVG 動畫標簽，圖形漸變，路徑動畫，線條動畫，SVG 裁剪等。例如：路徑動畫 showImg(https://segmentf...

whinc 2019-08-20 16:27 評論0 收藏0
讀javascript語言精髓筆記

摘要：對象默認值填充對象屬性不存在時，使用運算符填充屬性不確定時避免報錯當檢索一個的值時，可以通過運算符來避免錯誤。例報錯先檢索是否為，后避免執行后面報錯檢測對象中是否存在該屬性，不會查找該對象的原型鏈。對象默認值填充對象屬性不存在時，使用||運算符填充：obj.name||lpp object屬性不確定時避免報錯當檢索一個undefined的值時，可以通過 &&運算符來避免錯誤。例...

baukh789 2019-08-23 10:49 評論0 收藏0