資訊專欄INFORMATION COLUMN
摘要：元素元素歸屬于容器和結構元素，在文檔內允許嵌套使用獨立的片段。如果包含葡萄的組被移動到文檔的末尾，它將出現在西瓜的前面。例如，將葡萄的莖的路徑移動到組的末尾將導致莖在頂部。
簡介作者：DDU（滬江前端開發工程師）
本文是原文翻譯，轉載請注明作者及出處。
Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語言。這些圖形由路徑，圖片和（或）文本組成，并能夠在不失真的情況下任意變換尺寸。
本書主要介紹了內聯SVG，它是指在HTML中編寫的嵌入式代碼，以便在瀏覽器中生成這些圖形。
以這種方式使用SVG有許多優點，包括為了交互目的訪問所有圖形的各個部分，支持訪問 SVG 文檔構成的 DOM 節點樹，查詢、修改 DOM 節點的屬性，提升用戶可訪問性。
先介紹基本組織和簡單形狀，再繼續描述SVG坐標系或“Canvas”，然后用它繪制圖形的內部和/或邊框，變換，以及使用和操作圖形文本。通過漸變和模式等更高級的功能來總結。
這個指南快速且詳細的介紹內聯式SVG以及所有涵蓋的可使用的功能，有助于你學習SVG。 它面向設計師和開發人員，希望以最可行的方式將SVG添加到他們的工作流程中。
從小筆畫細節到開始使用手工制作的模式，本指南旨在成為一個圍繞“go-to”編寫SVG的參考。
前言本“口袋指南”只針對已經有一些HTML和CSS基礎的人，在你喜愛的瀏覽器中繪制SVG之前最好知道一些額外的知識, 例如：在SVG中正確渲染的信息，如何讓你的圖形更容易訪問，以及何時何處使用矢量圖形軟件。
如何使用SVG有許多方法可以把SVG插入到你的項目：內聯、img標簽、背景圖、
盡管我們只是介紹了內聯SVG的使用方法，但在某些特定情況下，其他方法也許會更好。例如，如果你不需要圖形本身的編輯功能或訪問其各個部分，則用--> 第一節：篇章組織
SVG詳細信息位于
如上所述，內聯圖形可以“手動”編寫，或者通過訪問由矢量圖形軟件生成的XML代碼來嵌入。因為這些圖形元素的順序決定了它們的堆疊順序，所以無論哪種方式，正確的組織和結構對于編寫高效的SVG代碼至關重要的。
組織和語義SVG文檔片段由
本節將介紹編寫SVG的關鍵 -
svg 元素此元素中使用的屬性（如width，height，preserveAspectRatio和viewBox）定義正在寫入圖形的畫布。
當從某些矢量軟件獲得SVG代碼時，在
g 元素g元素是組合相關圖形的容器元素。將此元素與描述和標題元素結合使用提供圖形的相關信息，并將相關圖形組件分在同一組在一起提高訪問性。 此外，通過相關元素分在同一組，可以將它們看作一個整體與各個獨立的部分。移動這些元素尤其方便，例如，可以移動整個組。 不包含在g中的任何元素則認為有它們自己的組。
use 元素 defs 元素雖然
HTML中的其他元素的堆疊順序可以CSS中的z-index操縱，但SVG不能。 SVG元素的堆疊順序完全取決于它們在文檔片段中的位置。 下面的葡萄和西瓜在同一個
如果包含葡萄的組被移動到文檔的末尾，它將出現在西瓜的前面。
這種定型的堆疊順序的方法也適用于組內的每一個元素。例如，將葡萄的莖的路徑移動到組的末尾將導致莖在頂部。
第二節：基本形狀和路徑當你需要在HTML中使用更復雜的內聯SVG圖形時就沒有辦法再手工編寫了。那些更復雜的圖形可以使用矢量軟件創建，但現在我們來學習下手動編碼的基礎。
基本形狀SVG包含以下基本形狀元素集：矩形，圓形，橢圓形，直線，折線和多邊形。每個元素在渲染之前需要一些屬性，如坐標和大小等詳細信息。
矩形width和height屬性確定矩形的大小，而fill則設置形狀的內部顏色。數值默認為pixels，當未指定時，fill將默認為黑色。 其他屬性還有x和y坐標。這些值將圖形沿
也可以通過指定rx和ry屬性中的值來創建圓角。例如，rx =“5”ry =“10”將產生具有5px半徑的角的水平邊，以及具有10px半徑的角的垂直邊。
圓形基于中心點和外半徑設置
cx和cy坐標建立圓的中心相對于由
橢圓當cx和cy值基于到SVG坐標空間中的像素距離建立中心點時，rx和ry值定義形狀的邊的半徑。
直線line元素定義具有開始點和結束點的直線。
x1和y1值確定線的開始坐標，而x2和y2值確定線的結束坐標。
折線在整個形狀中points的值在x和y軸上建立形狀的位置，并且在整個值列表中被分組為x，y。不能使用奇數點。
多邊形多邊形形狀的點通過八組的x，y值來定義。
該元素還可以根據點的數量產生其他閉合形狀。
路徑元素SVG路徑表示形狀的輪廓。此形狀可以填充，描邊，并用于導航文本和/或用作剪切路徑。 當涉及許多曲線時，這個路徑會變得非常復雜。然而，理解工作原理和涉及的語法將有助于管理這些特定路徑。
path data路徑數據包含在
下面的
moveto命令（M或m）建立一個新的點，就像提起一支鋼筆，并在紙上一個新位置繪制。包括路徑數據的代碼行必須以moveto命令開始，如上面的例子所示。 moveto命令跟在初始化路徑之后，代表新子路徑的開始和復合路徑的創建。這里的大寫字母M表示絕對坐標，小寫字母m表示相對坐標。
closepathclosepath（Z或z）表示當前子路徑的結束，并從該點到路徑的初始點繪制直線。 如果closepath之后緊跟著一個moveto，這些moveto坐標表示下一個子路徑的開始。如果這個相同的closepath之后是moveto之外的任何東西，則下一個子路徑從當前子路徑的點開始。 這里大寫或小寫z沒有區別。
linetolineto命令從當前點到新點繪制直線。
L, lL和l命令從當前點繪制一條線到下一個提供的點坐標。這個新點然后變成當前點，以此類推。 大寫L表示絕對定位，而小寫l是相對定位。
H, hH和h命令從當前點繪制水平線。
大寫H表示絕對定位，而小寫h是相對定位。
V和v命令從當前點繪制垂直線。
大寫V表示絕對定位，而小寫v是相對定位。
有三組命令繪制曲線路徑：CubicBézier（C，c，S，s），二次貝塞爾（Q，q，T，t）和橢圓弧（A，a）。 以下曲線部分將介紹每條曲線命令的基本概念，和映射的詳細信息，然后提供一個圖表供進一步了解。
Cubic BézierC和c CubicBézier命令從當前點繪制曲線，使用（x1，y1）參數作為曲線開始處的控制點，（x2，y2）作為結束處的控制點，定義形狀細節曲線。
S和s命令還繪制立方貝塞爾曲線，但在這種情況下，存在第一控制點是第二控制點的反射的假設。 下面的代碼繪制了一個基本的CubicBézier曲線：
該曲線的第一和最后一組值將影響其開始和結束位置，兩個中心值將影響曲線本身在開始和結束時的形狀和定位。 S和s命令也繪制立方貝塞爾曲線，但在這種情況下，假設第一個控制點是前一個C命令的最后一個控制點的反映。則會作為相對于S命令的開始點。
大寫字母C表示絕對定位，而小寫字母c是相對定位。S和s也是一樣。
Quadratic Bézier二次貝塞爾曲線（Q，q，T，t）類似于立方貝塞爾曲線，除了它只有一個控制點。
以下代碼繪制了一個基本的二次貝塞爾曲線：
操作第一個和最后一組值M20,50和100,50會影響曲線起點和終點的位置。中心值集Q40,5定義曲線的控制點，確定其形狀。
Q和q使用（x1，y1）作為控件從初始點到終點繪制曲線。 T和t通過假設控制點是相對于新的T或t命令的開始點的先前列出的命令的控制的反映，從初始點到終點繪制曲線。
大寫的Q信號表示絕對定位，而小寫的q是相對定位。T和t也是一樣。
Elliptical Arc橢圓弧（A，a）定義橢圓的線段。這些段通過A或命令創建，通過指定起點，終點，x和y半徑，旋轉和方向創建弧。
下面是一個基本橢圓弧的代碼：
該路徑中的第一和最后一組值，M65,10和50,25表示初始和最終坐標，而第二組值定義兩個半徑。 1,0（大弧標志和順時針標志）的值確定如何繪制圓弧，因為這里有四個不同的選項。 下圖顯示了四個弧選項以及大弧標志值和順時針標志值對弧段的最終渲染的影響。
矢量軟件嵌入矢量圖形軟件可以制作更復雜的形狀和路徑，同時可以導出SVG代碼在其他地方使用和操作。
一旦圖形完成，生成的XML代碼可以被復制并嵌入到HTML中，圖形越復雜代碼越長。分解SVG的每個部分并且運用適當的組織元素可以極大地幫助引導和理解這些復雜和冗長的代碼。
這里是一些櫻桃的SVG代碼圖像，添加了引導類：
svg元素中的屬性定義工作區，或圖形的“畫布”。葉和莖在一個g（組）內，而櫻桃在另一個。數字字符串定義圖形將采用的路徑，fill和stroke屬性設置背景和邊框的顏色。
將這個代碼復制下來，它會通過一個SVG優化器在被放置在HTML之前，以助于消除不必要的代碼和間距，進而大大縮小文件。 關于這個方面Peter Collingridge的SVG Optimiser和SVGO也是非常有用的工具。
致謝我用這一整節的內容來表達對你們特別的感謝：
CSS-Tricks(http://css-tricks.com/)
Lincoln Loop(http://lincolnloop.com/)
Designmodo(https://designmodo.com/)
Tahoe Partners(http://www.tahoepartners.com/)
Una Kravets(https://twitter.com/Una)
原文地址：http://svgpocketguide.com/book/
剩余部分將在編寫SVG的口袋指南（下）中展示，敬請期待。
iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。
>> 滬江Web前端上海團隊招聘【Web前端架構師】，有意者簡歷至：zhouyao@hujiang.com <<
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51256.html
摘要：元素元素歸屬于容器和結構元素，在文檔內允許嵌套使用獨立的片段。如果包含葡萄的組被移動到文檔的末尾，它將出現在西瓜的前面。例如，將葡萄的莖的路徑移動到組的末尾將導致莖在頂部。 作者：DDU（滬江前端開發工程師）本文是原文翻譯，轉載請注明作者及出處。 簡介 Scalable Vector Graphics (SVG)是在XML中描述二維圖形的語言。這些圖形由路徑，圖片和（或）文本組成，并能...
摘要：然而學習布局，你只要學習幾個手機端頁面自適應解決方案布局進階版附源碼示例前端掘金一年前筆者寫了一篇手機端頁面自適應解決方案布局，意外受到很多朋友的關注和喜歡。 十分鐘學會 Fiddler - 后端 - 掘金一.Fiddler介紹 Fiddler是一個http抓包改包工具，fiddle英文中有欺騙、偽造之意，與wireshark相比它更輕量級，上手簡單，因為只能抓http和https數據...
摘要：和這樣的預處理器，讓我們的代碼保持良好的結構和可維護性。這是否意味著變量已經無關緊要了呢那可未必，主要是因為，變量與預處理器中的變量其實是不同的東西。而你是無法對預處理器中的變量做上面這些操作的。 本文翻譯自：https://www.sitepoint.com/practical-guide-css-variables-custom-properties/ 轉載請注明出處：葡萄城官網，葡萄城...
摘要：要使用閉包，需要在另一個函數中創建一個函數，這種函數被稱為嵌套函數。只有名為閉包的功能才能對此進行訪問。結論閉包是外部函數中的變量集合，它提供對內部函數作用域的訪問以保護全局命名空間。 翻譯：瘋狂的技術宅https://medium.freecodecamp.o... 本文首發微信公眾號：前端先鋒歡迎關注，每天都給你推送新鮮的前端技術文章 閉包是函數創建時作用域內所有變量的集合。...
閱讀 1117·2023-04-26 03:02
閱讀 1161·2023-04-25 19:18
閱讀 2583·2021-11-23 09:51
閱讀 2561·2021-11-11 16:55
閱讀 2614·2021-10-21 09:39
閱讀 1694·2021-10-09 09:59
閱讀 1991·2021-09-26 09:55
閱讀 3512·2021-09-26 09:55
