鑰匙要點(diǎn)

Snap.svg是一個(gè)功能強(qiáng)大且靈活的庫(kù)，專為使用可伸縮矢量圖形（SVG）而設(shè)計(jì)，提供掩蓋，剪輯，圖案，漸變等功能。
• > Snap.svg svg元素可以在snap.svg中分組，以便更容易地將常見(jiàn)的轉(zhuǎn)換和事件處理應(yīng)用於組中的所有元素。 Snap.svg >
• >儘管SVG已經(jīng)存在了十多年，但由於一些很棒的圖書(shū)館，在過(guò)去幾年中，它在過(guò)去幾年中變得很流行，這是一種在Web應(yīng)用程序中繪製圖表的一種方式，這些圖書(shū)館毫不費(fèi)力地為開(kāi)發(fā)人員提供了精美的圖表和圖紙：圖表的特定d3.js和cool SVG圖紙和動(dòng)畫(huà)的rapha?l。
>
• 最近出現(xiàn)了新的傑出圖書(shū)館；他們?yōu)榍岸碎_(kāi)發(fā)人員和設(shè)計(jì)師提供了新的方法和驚人的新功能：
• 正如我們將要看到的
snap.svg，提供了最新的SVG功能，例如掩蓋，剪輯，圖案，漸變等...

pathsjs是基於SVG的圖表創(chuàng)建的最小庫(kù)。它旨在通過(guò)生成可與模板引擎一起使用的SVG路徑來(lái)支持反應(yīng)性編程。它可以與基於鬍子的模板引擎（例如ractive。

在本文的其餘部分中，我們將從基礎(chǔ)知識(shí)開(kāi)始。

• 如果您沒(méi)有機(jī)會(huì)看看Rapha?l，則可能應(yīng)該這樣做。這是Dmitry Baranovskiy作為一個(gè)獨(dú)奏項(xiàng)目創(chuàng)建的JavaScript的好部分。儘管它最初是一個(gè)個(gè)人項(xiàng)目，但結(jié)果對(duì)於接口（非常清晰且一致），性能和外觀（尤其是動(dòng)畫(huà)）而言是顯著的。該庫(kù)更朝著“徒手”圖紙和動(dòng)畫(huà)而不是圖表方向傾向。 Grapha?l擴(kuò)展後來(lái)被發(fā)布以解決此問(wèn)題，但它沒(méi)有像D3那樣流行和廣泛。

  >儘管領(lǐng)先於其他圖書(shū)館，但隨著時(shí)間的推移，拉法開(kāi)始顯示其極限。例如，為了與較舊的瀏覽器兼容，Rapha?l不支持所有使您的動(dòng)畫(huà)脫穎而出的新的新型SVG功能。

  這就是為什麼其作者決定從一個(gè)新的項(xiàng)目Snap.svg開(kāi)始新鮮的原因，該項(xiàng)目當(dāng)然受益於設(shè)計(jì)Rapha?l的經(jīng)驗(yàn)。 snap.svg也隨著過(guò)去而破壞，允許引入一種全新的特殊效果。 >

  哦，snap！
  >在進(jìn)行SNAP的語(yǔ)法並開(kāi)始以幾個(gè)示例開(kāi)始之前，讓我們快速回顧一下這個(gè)新圖書(shū)館的優(yōu)點(diǎn)：>

  pros：

  >它支持我們上面提到的所有酷功能。
  • snap可以包裹並為現(xiàn)有的SVG動(dòng)畫(huà)。您可以使用Adobe Illustrator，Inkscape或Sketch或load svg異步的字符串等工俱生成SVG，並查詢將SVG文件轉(zhuǎn)換為精靈所需的零件。
  >
  • 它是免費(fèi)的和開(kāi)源的。
  >
  cons：
  >這是一個(gè)低級(jí)庫(kù)，因此，如果您需要可視化數(shù)據(jù)，不幸的是，尚不支持圖表。
  >
  • 沒(méi)有支持?jǐn)?shù)據(jù)結(jié)合的支持。
  Snap是一個(gè)尚未完全成熟的年輕項(xiàng)目。它已經(jīng)很棒用於您的個(gè)人項(xiàng)目，但是您必須在復(fù)雜的項(xiàng)目中使用此方面。
  • 正如我們提到的，SNAP使用舊瀏覽器不支持的功能。儘管尚未提供完整，更新的兼容性表，但此庫(kù)應(yīng)至少在以下瀏覽器版本（和較新）的情況下工作正常：>
  • > firefox ESR 18
  IE 9.0.8

  Chrome 29

  > Opera 24
  • 開(kāi)始使用snap
  • >從GitHub存儲(chǔ)庫(kù)下載源文件後，您可以解壓縮它們並查找包含構(gòu)建分發(fā)文件的DIST文件夾。有關(guān)有關(guān)用咕unt構(gòu)建快照或檢查最新版本的詳細(xì)說(shuō)明，請(qǐng)?jiān)诖颂幉榭础?
  >在新項(xiàng)目的JS文件夾中復(fù)制了文件的縮小版本後，只需在HTML頁(yè)面中包含腳本即可。假設(shè)它位於項(xiàng)目的根目錄中，您只需在頁(yè)面關(guān)閉的車(chē)身標(biāo)籤之前添加此行：
  >現(xiàn)在，我們準(zhǔn)備為矢量圖形創(chuàng)建圖形區(qū)域。我們有兩種方法可以做到這一點(diǎn)：

  • 創(chuàng)建一個(gè)全新的圖紙表面，將附加到頁(yè)面的DOM（內(nèi)部）。
  >重新使用現(xiàn)有的DOM元素，然後將其包裹在快照結(jié)構(gòu)中。您可以包裝任何元素，但是對(duì)於繪圖方法，您需要一個(gè)SVG元素。 >
  第一種方法使您可以在JavaScript代碼中明確設(shè)置表面積的寬度和高度。如果您想在演示文稿和內(nèi)容之間實(shí)現(xiàn)更大的分離水平，則可以使用第二種方式，在CSS規(guī)則中指定值。在高水平上，第一種方法使您可以動(dòng)態(tài)地調(diào)整繪圖表面的外觀，但是如果不需要，第二種方法更符合MVC。此外，包裝使您可以導(dǎo)入和修改用外部工具創(chuàng)建的SVG圖紙，如介紹部分。

  因此，例如，要?jiǎng)?chuàng)建一個(gè)新的800 x 600像素繪圖區(qū)域，您只需要以下JavaScript的行：

  如果您要包裝現(xiàn)有的，請(qǐng)說(shuō)#complexsvgfromillustrator：

  <span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

  >您仍然可以逃脫一條JavaScript，以導(dǎo)入圖表：>

  <span>var s = <span>Snap</span>(800, 600);</span>

  旁注：對(duì)於好奇的讀者：如果您在創(chuàng)建後檢查快照對(duì)象，您會(huì)注意到它們有一個(gè)紙質(zhì)字段，並證明了Rapha?l的遺產(chǎn)。

  >形狀

  <span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
  </span>  ...
  <span><span><span></svg</span>></span></span>

  >一旦我們創(chuàng)建了繪圖表面，即我們的快照包裝器，就該在其上繪製一些形狀了。假設(shè)您想繪製一個(gè)圓圈：
  從文檔中可以看到，circle（）方法中的前兩個(gè)參數(shù)是其中心的坐標(biāo)，而第三個(gè)參數(shù)是圓形的半徑。所有這些參數(shù)都是強(qiáng)制性的，無(wú)法提供它們將導(dǎo)致錯(cuò)誤。與所有其他繪圖方法一樣，Circle（）方法將返回對(duì)對(duì)象的引用。

  >您也可以繪製橢圓，如以下代碼示例所示。這次需要垂直和水平半徑。同樣，所有參數(shù)都是強(qiáng)制性的。

  >
  如果您想繪製矩形，請(qǐng)使用以下代碼。這將創(chuàng)建一個(gè)矩形，其左上角（100px，100px），寬度為200px，高度為200px。

  <span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

  > rect（）方法的酷事是，它還接受兩個(gè)可選參數(shù)，以控制圓角的半徑，獨(dú)立於垂直和水平軸。這些參數(shù)默認(rèn)為0時(shí)未傳遞時(shí)，請(qǐng)注意，如果您僅通過(guò)一個(gè)（水平半徑），則第二個(gè)參數(shù)將不會(huì)設(shè)置為零，而是兩個(gè)都會(huì)假設(shè)相同的值。 >>>>>>

  >現(xiàn)在，如果您想從頭開(kāi)始啟動(dòng)，則可以創(chuàng)建另一個(gè)圖紙表面，也可以只使用Paper.clear（）方法來(lái)刪除紙張中的所有圖紙。

  >

  線和多邊形

  要涵蓋更複雜的圖紙，我們需要退後一步，然後談?wù)摾L圖線。正如您期望的那樣

  <span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

  >更有趣的是繪製複雜的聚會(huì)的可能性：var line = paper.polyline（10，100，110，200）;原則上等同於上面的Line（）方法，但您可能會(huì)對(duì)它的視覺(jué)結(jié)果感到驚訝。要看看為什麼，讓我們嘗試一下
  paper.polyline（）和paper.polygon（）是相同方法的別名，默認(rèn)情況下，所得的（封閉）多邊形用黑色填充和無(wú)衝程繪製。這就是為什麼您看不到上面使用polyline（）繪製的行（儘管可以通過(guò)檢查頁(yè)面檢查，但它確實(shí)已將其SVG代碼添加到其容器上）。

  <span>var s = <span>Snap</span>(800, 600);</span>

  要改變這種行為以及其他元素的外觀，我們必須引入屬性。
  屬性

  SNAP元素的屬性概念比平時(shí)更廣泛，這意味著它在同一接口下都包含HTML屬性和CSS屬性（而大多數(shù)其他庫(kù)可以區(qū)分HTML屬性的.attr（）方法和'。 style（）'對(duì)於CSS ）。通過(guò)在快照包裝對(duì)像上使用element.attr（）方法，您可以設(shè)置其類(lèi)或ID以及其顏色或?qū)挾取?

  >

  >如上所述，使用SNAP，您有兩種將CSS屬性分配給元素的方法。一種是將這些屬性包含在單獨(dú)的CSS文件中，然後將適當(dāng)?shù)念?lèi)分配給您的元素：>

  可以通過(guò)使用JavaScript分配這些屬性來(lái)獲得相同的結(jié)果：
  再次，第一種方式允許內(nèi)容和演示文稿之間更好地分離，而第二種方式則提供了動(dòng)態(tài)更改屬性的可能性。如果您正在考慮混合兩種策略，請(qǐng)記住，儘管將其分配給元素的時(shí)間順序，但CSS文件中定義的規(guī)則將勝過(guò)您分配的element.Attr（）。

  <span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
  </span>  ...
  <span><span><span></svg</span>></span></span>

  >如果您尚未維護(hù)要樣式的元素的引用，請(qǐng)放心，可以使用CSS選擇器輕鬆地抓住它：

  <span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

  組

  <span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
  </span>    circle <span>= paper.circle(100, 50, 10);</span>

  可以將 SVG元素分組，以便可以更輕鬆地將常見(jiàn)的轉(zhuǎn)換和事件處理應(yīng)用於組中的所有元素。創(chuàng)建組很容易：

  小心：訂購(gòu)或參數(shù)很重要！其次，如果您將元素分配給組，則將其從其可能已屬於的任何組中刪除。 > 當(dāng)然，

  元素在創(chuàng)建後也可以添加到現(xiàn)有組中：

  <span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

  >圖像

  snap支持SVG元素內(nèi)的嵌套柵格圖像，將其異步加載並僅在負(fù)載完成時(shí)顯示。

  <span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

  可以將結(jié)果對(duì)象視為SVG元素。請(qǐng)注意，如果您在圖像上使用select（）以後將它們檢索，則創(chuàng)建的包裝器將是HTML元素的元素，因此不支持SVG元素可用的大多數(shù)方法。

  轉(zhuǎn)換
  >我們已經(jīng)看到瞭如何繪製橢圓和矩形等不對(duì)稱多邊形。但是，基本方法限制了我們繪製與笛卡爾軸對(duì)齊的這些數(shù)字。如果我們想畫(huà)一個(gè)相對(duì)於X-y軸旋轉(zhuǎn)的軸45°的橢圓車(chē)怎麼辦？我們無(wú)法在創(chuàng)建方法中指定這一點(diǎn)，但是我們可以使用轉(zhuǎn)換來(lái)獲得相同的結(jié)果。 同樣，我們可能需要旋轉(zhuǎn)圖像，或者在創(chuàng)建後的某個(gè)時(shí)刻移動(dòng)元素（或組）。 Transform（）方法允許我們通過(guò)傳遞SVG轉(zhuǎn)換字符串：>
  此方法可以將字符串或?qū)ο褡鳛檩斎霋?cǎi)用。我們還可以使用與元素關(guān)聯(lián)的轉(zhuǎn)換矩陣將相同的轉(zhuǎn)換應(yīng)用於另一個(gè)元素：>
  要小心：第二個(gè)元素的轉(zhuǎn)換中心仍然是第一個(gè)元素的中心，因此最終效果可能會(huì)讓您感到驚訝。

  <span>var s = <span>Snap</span>(800, 600);</span>

  > Transform（）方法還可以用於檢索其調(diào)用元素的轉(zhuǎn)換描述對(duì)象 - 只需在沒(méi)有參數(shù)的情況下調(diào)用它即可。在嵌套元素的情況下，該描述符可用於檢索局部轉(zhuǎn)換矩陣和差異矩陣：>

  <span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
  </span>  ...
  <span><span><span></svg</span>></span></span>

  結(jié)論
  本文提供了Snap.svg的基礎(chǔ)知識(shí)的介紹。如果您有興趣看到最酷的東西，請(qǐng)繼續(xù)關(guān)注，因?yàn)楹芸炀蜁?huì)發(fā)布高級(jí)後續(xù)行動(dòng)。

  如果您想了解有關(guān)數(shù)據(jù)可視化和快照的更多信息，請(qǐng)參閱以下一些有用的資源：>

  <span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

  snap.svg教程。
  >從有關(guān)數(shù)據(jù)訪問(wèn)和高級(jí)技術(shù)的演示文稿中幻燈片。

  >

  >查看上面在Codepen上使用的某些代碼。
  經(jīng)常詢問(wèn)有關(guān)SNAP SVG
  1. 的問(wèn)題（常見(jiàn)問(wèn)題解答）
  SNAP SVG和其他SVG庫(kù)之間有什麼區(qū)別？
  2. SNAP SVG是一個(gè)功能強(qiáng)大且靈活的庫(kù)，專為使用可擴(kuò)展的矢量圖形（SVG）而設(shè)計(jì)。與其他SVG庫(kù)不同，SNAP SVG提供了一種簡(jiǎn)單而直觀的API，用於對(duì)SNAP SVG生成的現(xiàn)有SVG內(nèi)容和SVG內(nèi)容進(jìn)行動(dòng)畫(huà)和操縱。它還支持大多數(shù)SVG功能，包括梯度，圖案和剪裁路徑，並且與所有現(xiàn)代瀏覽器兼容。
  3. >如何開(kāi)始使用SNAP SVG？

  開(kāi)始使用Snap SVG，您需要在HTML文檔中包含SNAP SVG JavaScript文件。您可以從官方的SNAP SVG網(wǎng)站下載它，也可以直接從CDN中包含它。包含SNAP SVG文件後，您可以使用SNAP SVG API開(kāi)始創(chuàng)建和操縱SVG內(nèi)容。

  >我可以將SNAP SVG用於復(fù)雜的動(dòng)畫(huà)嗎？它提供了強(qiáng)大的動(dòng)畫(huà)API，可讓您對(duì)任何SVG屬性進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)。您還可以使用SNAP SVG的矩陣變換來(lái)輕鬆創(chuàng)建複雜的動(dòng)畫(huà)。另外，SNAP SVG支持寬鬆功能，可以用來(lái)創(chuàng)建光滑而自然的動(dòng)畫(huà)。

  > SNAP SVG與所有瀏覽器兼容？

  >

  snap svg與所有現(xiàn)代瀏覽器兼容，包括Chrome（包括Chrome） ，F(xiàn)irefox，Safari，Opera和Internet Explorer 9及以上。但是，在較舊的瀏覽器中可能無(wú)法完全支持某些SVG功能。

  >

  >如何使用SNAP SVG？

  SNAP SVG提供一個(gè)簡(jiǎn)單而直觀的API，用於創(chuàng)建交互式SVG內(nèi)容。您可以使用SNAP SVG的事件處理功能來(lái)響應(yīng)用戶交互，例如點(diǎn)擊或鼠標(biāo)運(yùn)動(dòng)。您還可以使用SNAP SVG的動(dòng)畫(huà)API來(lái)創(chuàng)建交互式動(dòng)畫(huà)。
  我可以將SNAP SVG與其他JavaScript庫(kù)一起使用嗎？

  是的，可以與其他JavaScript庫(kù)一起使用SNAP SVG。它不會(huì)干擾其他庫(kù)，也不會(huì)修改任何本機(jī)JavaScript對(duì)象。這使SNAP SVG成為使用其他JavaScript庫(kù)的項(xiàng)目。

  >如何使用SNAP SVG？

  >我可以使用SNAP SVG創(chuàng)建SVG濾波器嗎？

  是的，SNAP SVG支持SVG過(guò)濾器。您可以使用SNAP SVG的過(guò)濾器功能來(lái)創(chuàng)建和應(yīng)用SVG濾波器到SVG元素。這使您可以創(chuàng)建廣泛的視覺(jué)效果，例如模糊，照明和顏色調(diào)整。創(chuàng)建SVG梯度。您可以使用SNAP SVG的梯度函數(shù)來(lái)創(chuàng)建線性和徑向梯度，並且可以使用SNAP SVG的顏色函數(shù)來(lái)定義梯度的顏色。

  >

  >我可以使用snap svg創(chuàng)建SVG模式嗎？ ??>是的，SNAP SVG支持SVG模式。您可以使用SNAP SVG的模式功能來(lái)創(chuàng)建和應(yīng)用SVG模式，以對(duì)SVG元素。這使您可以創(chuàng)建廣泛的視覺(jué)效果，例如紋理和圖案。

  >

以上是Snap.svg的介紹的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！