Snap.svg的介紹

鑰匙要點

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

>

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

>儘管不是基於SVG的，但P5值得一提。這是一個嘗試，顯然是一個很好的嘗試來克服影響HTML5畫布元素的傳統問題 - 特別是相互作用。

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

>raphaël

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

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

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

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

  pros：

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

  Chrome 29

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

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

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

  如果您要包裝現有的，請說#complexsvgfromillustrator：

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

  >您仍然可以逃脫一條JavaScript，以導入圖表：>

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

  旁注：對於好奇的讀者：如果您在創建後檢查快照對象，您會注意到它們有一個紙質字段，並證明了Raphaël的遺產。

  >形狀

  <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>

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

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

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

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

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

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

  >

  線和多邊形

  要涵蓋更複雜的圖紙，我們需要退後一步，然後談論繪圖線。正如您期望的那樣

  <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（）方法，但您可能會對它的視覺結果感到驚訝。要看看為什麼，讓我們嘗試一下
  paper.polyline（）和paper.polygon（）是相同方法的別名，默認情況下，所得的（封閉）多邊形用黑色填充和無衝程繪製。這就是為什麼您看不到上面使用polyline（）繪製的行（儘管可以通過檢查頁面檢查，但它確實已將其SVG代碼添加到其容器上）。

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

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

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

  >

  >如上所述，使用SNAP，您有兩種將CSS屬性分配給元素的方法。一種是將這些屬性包含在單獨的CSS文件中，然後將適當的類分配給您的元素：>

  可以通過使用JavaScript分配這些屬性來獲得相同的結果：
  再次，第一種方式允許內容和演示文稿之間更好地分離，而第二種方式則提供了動態更改屬性的可能性。如果您正在考慮混合兩種策略，請記住，儘管將其分配給元素的時間順序，但CSS文件中定義的規則將勝過您分配的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>

  >如果您尚未維護要樣式的元素的引用，請放心，可以使用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元素分組，以便可以更輕鬆地將常見的轉換和事件處理應用於組中的所有元素。創建組很容易：

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

  元素在創建後也可以添加到現有組中：

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

  >圖像

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

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

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

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

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

  > Transform（）方法還可以用於檢索其調用元素的轉換描述對象 - 只需在沒有參數的情況下調用它即可。在嵌套元素的情況下，該描述符可用於檢索局部轉換矩陣和差異矩陣：>

  <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>

  結論
  本文提供了Snap.svg的基礎知識的介紹。如果您有興趣看到最酷的東西，請繼續關注，因為很快就會發布高級後續行動。

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

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

  snap.svg教程。
  >從有關數據訪問和高級技術的演示文稿中幻燈片。

  >

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

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

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

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

  >

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

  >

  >如何使用SNAP SVG？

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

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

  >如何使用SNAP SVG？

  >我可以使用SNAP SVG創建SVG濾波器嗎？

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

  >

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

  >

以上是Snap.svg的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！