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