鑰匙要點

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

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

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

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

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

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

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

  pros：

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

  Chrome 29

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

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

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

  如果您要包裝現(xiàn)有的，請說#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>

  旁注：對於好奇的讀者：如果您在創(chuàng)建後檢查快照對象，您會注意到它們有一個紙質(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è)您想繪製一個圓圈：
  從文檔中可以看到，circle（）方法中的前兩個參數(shù)是其中心的坐標(biāo)，而第三個參數(shù)是圓形的半徑。所有這些參數(shù)都是強(qiáng)制性的，無法提供它們將導(dǎo)致錯誤。與所有其他繪圖方法一樣，Circle（）方法將返回對對象的引用。

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

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

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

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

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

  >

  線和多邊形

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

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

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

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

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

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

  >

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

  可以通過使用JavaScript分配這些屬性來獲得相同的結(jié)果：
  再次，第一種方式允許內(nèi)容和演示文稿之間更好地分離，而第二種方式則提供了動態(tài)更改屬性的可能性。如果您正在考慮混合兩種策略，請記住，儘管將其分配給元素的時間順序，但CSS文件中定義的規(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ù)要樣式的元素的引用，請放心，可以使用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元素分組，以便可以更輕鬆地將常見的轉(zhuǎn)換和事件處理應(yīng)用於組中的所有元素。創(chuàng)建組很容易：

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

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

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

  >圖像

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

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

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

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

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

  > Transform（）方法還可以用於檢索其調(diào)用元素的轉(zhuǎn)換描述對象 - 只需在沒有參數(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ǔ)知識的介紹。如果您有興趣看到最酷的東西，請繼續(xù)關(guān)注，因為很快就會發(fā)布高級後續(xù)行動。

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

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

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

  >

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

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

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

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

  >

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

  >

  >如何使用SNAP SVG？

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

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

  >如何使用SNAP SVG？

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

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

  >

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

  >

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