Snap.svg README

The project's README from github.com/adobe-webplatform/Snap.svg. As one markdown file: README.md.

Snap.svg · Build Status CDNJS GitHub Tag License

A JavaScript SVG library for the modern web. Learn more at snapsvg.io.

Follow us on Twitter.

Install

Learn

Use

In your HTML file, load simply by:

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

No other scripts are needed. Both the minified and uncompressed (for development) versions are in the /dist folder.

webpack

To load with webpack 2.x and 3.x, install Imports Loader (npm i -D imports-loader), and add the following to your webpack config:

module: {
  rules: [
    {
      test: require.resolve('snapsvg/dist/snap.svg.js'),
      use: 'imports-loader?this=>window,fix=>module.exports=0',
    },
  ],
},
resolve: {
  alias: {
    snapsvg: 'snapsvg/dist/snap.svg.js',
  },
},

Then, in any module you’d like to require Snap, use:

import Snap from 'snapsvg';

Build

Build Status

Snap.svg uses Grunt to build.

cd Snap.svg

npm install -g grunt-cli

*You might need to use sudo npm, depending on your configuration.

npm install

*Snap.svg uses Grunt 0.4.0. You might want to read more on their website if you haven’t upgraded since a lot has changed.

grunt

Testing

Tests are located in test folder. To run tests, simply open test.html in there. Automatic tests use PhantomJS to scrap this file, so you can use it as a reference.

Alternatively, install PhantomJS and run command

grunt test

Contribute

git checkout -b my_branch

git commit -am "Added some awesome stuff"

git push origin my_branch

Note: Pull requests to other branches than dev or without filled CLA wouldn’t be accepted.

Snap.svg (adobe-webplatform/Snap.svg)

Searching Database…

14K ·GitHub
Snap.svg
这是什么？Snap.svg 是一个 JavaScript 库，用于在浏览器中创建和制作现代 SVG 图形的动画。
它是框架还是库？它是一个库，你可以在页面中加载它，或将其与应用一起打包；它依赖一个小型的 'eve' 事件库。
我该如何把它添加到项目中？可以用 Bower（bower install snap.svg）或 npm（npm install snapsvg）安装，也可以从 dist 文件夹中手动获取压缩版或未压缩版的文件，然后在 HTML 中加载脚本即可，无需其他脚本。
使用它是否需要 webpack 或其他构建工具？不需要，你可以直接在 HTML 中加载脚本；只有在想要打包它时才需要 webpack，而且此时还需要 Imports Loader 包。
Snap.svg 能在哪里运行？它可以在任何支持 SVG 的现代网页浏览器中运行，因为它是一个客户端 JavaScript 库。
我可以从哪里进一步了解 Snap.svg？项目页面指向 snapsvg.io，那里有入门指南、API 参考，以及一个用于社区求助的 Slack 聊天室。
为什么要用 Snap.svg，而不是直接操作原生 SVG？它提供了更高层的 JavaScript API，用于创建、动画和操作 SVG 元素，让你不必手写冗长的原生 DOM/SVG 代码。
What are similar projects?lottie-web, mojs, raphael, zdog, lenis, d3, plotly.js, twemoji
Which topics is it in?snap, svg, graphics, javascript-library, animation, frontend, apache-2.0, library, javascript, web, open-source
Creator
adobe-webplatform
Size
3.7 MB
Stars
14K
Updated
CommitMar 13
Age
13y
Commits · 90 Days