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中文网其他相关文章！