高级快照-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过滤器，掩码和梯度。