高級快照-js教程-PHP中文網

>動畫

性能改進

> SNAP snap SVG支持瀏覽器兼容性嗎？ >是的，SNAP SVG旨在與所有現代瀏覽器兼容，包括Chrome，Firefox，Safari和Internet Explorer 9及更高版本。這意味著您可以使用它來創建SVGS，該SVG將在各種設備和瀏覽器中正確顯示。

首頁

web前端

js教程

高級快照

William Shakespeare

Feb 20, 2025 am 10:33 AM

Advanced Snap.svg

高級快照

>我們在較早的文章中看到瞭如何開始使用snap.svg。在這篇文章中，我們將仔細研究第一篇文章中提到的新功能。

鑰匙要點

> snap.svg中的事件處理允許用戶互動，並使用可以處理單擊，雙擊，鼠標移動和触摸事件的方法。
> svg支持現有SVG代碼的重複使用，允許將SVG代碼注入字符串或讀取現有文件。

圓圈覆蓋了圖像的中心。

>

>可惜您只能擁有矩形圖像。也許您的設計師創建了不錯的圓形按鈕或圖像。當然，有幾種解決方案，但是它們都給您留下了另一個問題：最佳情況下，設計師可以為您提供與頁面背景相匹配的外部圖像，以使其看起來圓形。但是，假設您的背景紮實，則必須更改其顏色，則必須編輯圖像。您可以使用透明度，但是您要么需要較重的格式，例如PNG，要么使用GIF散髮質量。也許在幾年內，WebP將得到所有瀏覽器的完全支持，這將結束難題。無論哪種方式，如果您需要圖像的互動性，您都會被矩形形狀所困擾，以響應鼠標，鼠標out，click等事件。

> 過去，SVG中最令人沮喪的事情之一是無法使用SVG 1.1中引入的口罩，這是SVG中最令人沮喪的事情之一。在快照中，將口罩塗上任何元素，包括圖像，都很容易：

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

登入後複製

基本上，我們只需要將蒙版屬性分配給我們的元素。我們必須小心用作實際面具的元素。由於最終元素的不透明度將與蒙版元素中的白色水平成正比，因此，如果我們想要對圖像的完全不透明度，則必須填充白色的圓圈。雖然起初這似乎很煩人，但它為驚人的效果打開了很多可能性，正如我們在下一節中所看到的。

>您顯然可以組成不同的形狀以創建複雜的面具。 SNAP提供一些句法糖來幫助您：

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

登入後複製

paper.mask（）方法等效於paper.g（），實際上它可以被它無縫替換。

> 剪輯路徑限制了可以應用塗料的區域，因此未繪製由當前活動剪輯路徑界定的區域之外的圖紙的任何部分。可以將剪裁路徑視為具有可見區域的面具（在剪輯路徑內）的alpha值為1，而隱藏區域的alpha值為0。一個區別是，儘管面具隱藏的區域仍然會響應事件，剪切的區域不會。

snap沒有用於剪輯的快捷方式，但是您可以使用attr（）方法設置任何元素的剪輯，剪輯路徑和剪輯 - 路由屬性。

漸變

SVG 1.1允許使用梯度填充形狀。當然，如果我們使用這些形狀填充口罩，我們可以通過更改口罩的填充並創造出驚人的效果來利用指定最終圖的alpha級別的可能性。 SNAP提供了創建梯度的快捷方式，以後可以將其分配給其他元素的填充屬性。如果我們只修改以前的代碼，例如：

>

如果您測試此代碼，則最終效果不會完全是您所期望的。那是因為我們使用了相對輻射梯度類型，該類型由上面的小寫“ r”表示。相對梯度是針對組的每個元素（作為複合面罩）的分別創建的。如果您希望整個組都有一個梯度，則可以使用該命令的絕對版本。 'r（）＃fff-＃000'是一個絕對的輻射梯度，從中心填充白色，然後在邊界處降解為黑色。

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

登入後複製

我們可以通過指定任何元素的填充屬性的SVG梯度來獲得相同的結果：

在最後一個示例中，我們顯示了一個更複雜的梯度。除了不同類型（絕對線性），該梯度從（0，0）到（300，300），從黑色到紅色，在25％到白色。 > >也可以使用頁面中任何SVG元素的現有梯度：>

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

登入後複製

模式

通過重複出現另一種SVG形狀，梯度或圖像的出現，

模式可以填充形狀。 snap提供元素.topattern（）方法（forme for pattern（），現在已棄用），該方法從任何snap元素中創建一個模式。

創建圖案並用它填充元素很簡單：>

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

登入後複製

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

登入後複製

，如果我們想結合漸變和圖案，那是一個不同的故事，一個稍微複雜的故事！例如，讓我們看看如何創建一個將輻射梯度結合的掩碼和類似於上述圖案的掩碼：

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

登入後複製

>我們基本上必須創建一個兩個級別的地圖。在我們的圖像上使用的最終地圖（我們都用梯度填充，其地圖本身都充滿了梯度。結果令人印象深刻！事實證明，這也是向您介紹clone（）方法的好機會，該方法可以實現您的想像- 創建了所謂的元素的深層副本。

>動畫

>動畫是Snap.svg最佳製作功能之一。有幾種處理動畫的方法，行為略有不同。

> element.animate（）

>我們將從最簡單的動畫方法開始，element.animate（）。此方法允許用戶對任何數量的元素屬性進行動畫，所有元素屬性都同步。當然，該屬性的初始值是其當前值，而最終值是在第一個參數中指定的要動畫（）。除了要更改的屬性之外，還可以通過動畫的持續時間，輕鬆和回調，該回調將在動畫完成後被調用。

一個示例將使一切變得更清晰：

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

登入後複製

這將在兩秒鐘的過程中只需將面罩中的大圓圈縮小到一個較小的半徑。

set.aimate（）

>您可以獨立地在組（集合）中進行動畫元素。但是，如果您想同步對整個集合進行動畫動畫怎麼辦？簡單的！您可以使用set.aimate（）。這將對集合中的所有元素進行相同的轉換，確保各種動畫之間的同步性，並通過將所有更改聚集在一起來增強性能。

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

登入後複製

>您還可以獨立但同步為集合中的每個元素動畫。 set.aimate（）接受可變數量的參數，因此您可以通過每個子元素的參數傳遞一個數組，您需要動畫：

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

登入後複製

>假設您到目前為止正確地遵循了我們的示例代碼（在Codepen上嘗試），在瀏覽器的控制台中運行上面的代碼，您將看到三個元素如何同步，但獨立。上面的代碼也是引入集合的機會（作為Select（）和Selectall（）方法的結果），以及在其上定義的一些有用的方法。

創建集合的另一種方法是將一系列元素傳遞到snap構造函數方法：

：

snap.aimate（）

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

登入後複製

>您可以動畫任何數字屬性，但是Animate（）無法在其他類型上使用，例如，如果您嘗試為其文本屬性進行動畫動畫，它將弄亂您的文本元素。然而，還有另一種獲得這種效果的方法，即在snap中調用Animate（）的第三種方法。通過調用SNAP對象的動畫方法，可以在動畫的每個步驟中執行的操作。這兩者都有助於將復雜的動畫分組在一起並同步運行它們（儘管set.aimate（）方法將是解決此問題的正確方法），並為複雜的，非數字屬性進行動畫。例如，讓我們創建和動畫文本元素：>

>事件處理

回到蒙版和圖像之間的初始比較，您可以獲得與上一節中使用動畫GIF（一種）相同的效果。但是，如果您想根據用戶互動來重現此行為，則使用SVG的改進更加相關。您仍然可以找到一種使用多個GIF來使其工作的方法，但是除了失去靈活性外，您將無法以少量精力獲得相同的質量：

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

登入後複製

>單擊處理程序可以稍後使用element.unclick（）方法刪除。

>可以處理的其他事件外，還有DBLCLICK，MOUSEDOWN和MOUSEUP，MOUSEMOVE，MOUSEEMOUT和MOUSEOVER，以及許多面向移動的事件，例如TouchStart和TouchEnd。

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

登入後複製

對於我們曾經jQuery或d3接口的讀者的

，在SNAP中沒有on（）方法可以手動處理其他事件。如果您需要超越SNAP提供的處理程序的自定義行為，則可以檢索任何元素的節點屬性，而該元素又包含對關聯的DOM元素的引用，並且（可能在用jQuery包裝後）可以添加處理程序和直接的屬性：

拖動

使用元素，drag（）方法的任何元素，組或設置的

SNAP使拖放特別容易激活拖放。如果您不需要任何自定義行為，則無需任何參數即可致電：

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

登入後複製

但是，如果您需要一些特殊的行為，則可以傳遞OnMove，Ondragstart，Ondragend Events的自定義回調和上下文。請注意，如果您想通過下一個>

添加拖動處理程序不會隱藏點擊事件，除非明確防止。

>加載現有的SVG

這個偉大庫的最強要點之一是，它支持現有SVG代碼的重複使用。您可以將其“注入”為字符串，甚至更好，甚至可以讀取現有文件，然後更改。

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

登入後複製

您可以自己嘗試。下載並保存在項目的根源中，這款不錯的SVG圖紙。接下來，將其加載到您的頁面中，將其樣式或結構如我們想要的那樣更改，甚至在將其添加到DOM樹之前，添加事件處理程序等。

note

：由於瀏覽器中的相同原始策略，您需要在本地服務器中運行示例來測試加載方法。

性能改進

在操縱DOM時使用文檔範圍時提高性能的一種方法。片段是DOM節點的最小容器。幾年前推出，它們允許您廉價地操縱整個子樹，然後克隆並用2個方法調用而不是n添加一個帶有n個節點的整個子樹。實際差異在John Resig的博客上的詳細信息中解釋了。

snap也允許本地使用片段，並使用兩種方法：>

> snap.parse（svg）採用一個參數，一個帶有SVG代碼的字符串，對其進行解析並返回一個片段，以後可以將其附加到任何圖紙表面。
特別是對於大型SVG圖紙，當適當使用時，碎片可以節省大量性能。

結論

這是我們有關高級Snap.svg的文章的結論。現在，讀者應該清楚地了解他們可以在這個庫中做什麼以及如何做。如果您有興趣更多學習，那麼快照文檔是一個不錯的起點。

>

有幾個有用的鏈接：

snap.svg教程。

經常詢問有關高級SNAP SVG

什麼是SNAP SVG，為什麼在Web開發中它很重要？ SVG是Web開發不可或缺的一部分，因為它們允許創建高質量的可擴展圖形，無論其顯示屏幕的大小或分辨率如何，它們都可以保持清晰度。 SNAP SVG通過提供一組可靠的工具來操縱和動畫SVG，從而增強了此功能？

SNAP SVG由於其全面的功能集和易用性而在其他SVG庫中脫穎而出。它提供了一種簡單，直觀的API，使開發人員可以快速，輕鬆地創建，操縱和動畫SVG。此外，SNAP SVG支持廣泛的SVG功能，包括漸變，圖案，剪輯，掩蔽等，使其成為任何Web開發人員工具包的多功能工具。

>我可以與其他JavaScript庫一起使用SNAP SVG或者框架？框架。這意味著您可以將其與JQuery，React，Angular等工具一起使用，使您可以利用每個工具的優勢來創建更強大，交互式Web應用程序。

>我如何開始使用Snap SVG？

開始使用SNAP SVG，您首先需要在項目中包含SNAP SVG庫。這可以通過從SNAP SVG網站下載庫，並將其包括在HTML文件中，也可以通過使用NPM這樣的軟件包管理器來安裝它來完成。項目中包含該庫後，您可以開始使用它來創建和操縱SVG。網站的圖形和動畫。這可以包括諸如交互式圖表和圖表，動畫圖標，交互式地圖等內容。此外，由於SNAP SVG支持廣泛的SVG功能，因此它也可以用於更複雜的任務，例如創建SVG過濾器，掩碼和梯度。