Light

adobe-webplatform / snap.svg Goto Github PK

View Code? Open in Web Editor NEW

13.9K 403.0 1.1K 3.54 MB

The JavaScript library for modern SVG graphics.

Home Page: http://snapsvg.io

License: Apache License 2.0

JavaScript 99.47% HTML 0.53%

javascript javascript-library snap svg svg-animations

snap.svg's Introduction

Snap.svg ·

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

Follow us on Twitter.

Install

Bower - bower install snap.svg
npm - npm install snapsvg
Manual Minified - https://github.com/adobe-webplatform/Snap.svg/raw/master/dist/snap.svg-min.js
Manual Unminified - https://raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js

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

Snap.svg uses Grunt to build.

Open the terminal from the Snap.svg directory:

cd Snap.svg

Install its command line interface (CLI) globally:

npm install -g grunt-cli

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

Install dependencies with npm:

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.

To build the files run

grunt

The results will be built into the dist folder.
Alternatively type grunt watch to have the build run automatically when you make changes to source files.

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

Fill out the CLA.
Fork the repo.
Create a branch:

git checkout -b my_branch

Add your changes.
Check that tests are passing
Commit your changes:

git commit -am "Added some awesome stuff"

Push your branch:

git push origin my_branch

Make a pull request to dev(!) branch.

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

snap.svg's People

Contributors

Stargazers

Watchers

Forkers

kimwooglae barretron bryansattler gijs nuwud lholmquist jayvansantos zmilan drawcode chrisdaou thiagoricieri zupa-hu vmx jtyjty99999 daozen yanlinaung gthiruva alyzq faizalpribadi ivyandnana macpankiewicz oscareroles davepoon demironn sesteel ghettoeinstein jjhayes71 carlaspets iwatchallit ishiken0701 danielcole ziir tombyrer dluxo heyanshukla devluis joegarde ubiratanbraga wilham5 gizmonic sror t1wk blitzkrieg1 miamarti bryantcutler hughker ink85 jecons edyonil gwa davidcaro pavelnikolov wangshaohan1989 meiseayoung davgit brentkuhar bugsyalexander hadryan wouterlangen msoftware rubylouvre nityahoyos iamblue oslego rohinikumar4073 drrobotnik bymenjil hoanganhx86 viswanathankasi barillax thrandre marcosnav swedelevov jrabbe grahack cosmo web1o1 tamilps2 hongbao66 fschell sbking yashilanka n8mauer throrin19 jarey derekrose micschk connoratherton kublaj egriboz swervinerv davemayers houstongolden glamrock visiongeist avadhbsd zekarias99 dreammind louisfeng jcblw

snap.svg's Issues

Element.equal("transform", "") doesn’t work properly for IE10

It returns {from: 0, to: 0}, which doesn’t make sense.

Add missing unit tests

Looking the API docs and existing tests, the following methods still need testing and will be tracked here:

Savage

Savage.filter

Savage.path

Matrix

Set

Mina

Color parsing fails when using percentages

According to the API docs under Savage.getRGB(colour) it should be possible to parse colors with percentages set, like rgb(•••%, •••%, •••%) for rgb, hsl and hsb. However, all tests with strings like this appear to fail.

Create a v0.1.0 tag

Once all issues have been addressed, create a v0.1.0 tag and get Yohie the link to the zip file.

Get rid of elemental.js in favour of browser parsing.

IE 10: Docs page - Border shows up with logo and search field not showing up properly.

See attached screenshot

Issue with triggering .animate() from another .animate()'s callback

Came across a case where Element.animate() is not triggered from within another Element.animate()'s callback. I was able to resolve the issue by wrapping the second animate function in a setTimeout of 50ms. Appears to be a timing issue.

road_bottom.animate({x2:691.5}, 2000, function(){
    tunnel_mask_bottom_right.animate({
        y: 394,
        height:150
    }, 200);
    });

Element.data not functioning as expected

Test returns 'eldata is not defined' error when attempting to set data.

Test:
https://github.com/adobe-webplatform/savage/blob/eea4f89d29c5df1fa53f721022a878bb2ca3d9bb/test/element.js#L145

Element.asPX returning 0 when size given in ems

This test used to pass, so appears to have broken with a fairly recent change.

Test:
https://github.com/adobe-webplatform/savage/blob/2a8f553eaf66b5036c4442556333cd6701f5c963/test/element.js#L182

Animation methods with easing and callback params not working

Probably the same issue as in issue #5

Tests:
https://github.com/adobe-webplatform/savage/blob/master/test/savage-tests.js#L89
https://github.com/adobe-webplatform/savage/blob/master/test/savage-tests.js#L156

Coffee Maker fonts don't work

Check the screenshot. Please do one of the following:

Use a font from Typekit/Edge Web Fonts.
Use a font that more people have installed.

Please do not:

Check in the AdobeClean-Light font into this repo. (We can't do that.)

Let me know if you have questions. If you need another font, ask Yohei.

Element.getBBox() not functioning

Test throws error: ReferenceError: unit2px is not defined

Test:
https://github.com/adobe-webplatform/savage/blob/eea4f89d29c5df1fa53f721022a878bb2ca3d9bb/test/element.js#L178

Add a link to the Snap.svg website

Add a link to the Snap.svg site in the README. The link is (or will be) snapsvg.io.

The removed test should return!

Investigate why the test is not passing while the same code on the page is working perfectly.

The broken test code:

    it("Element.asPX - from em", function() {
        var rect = s.rect(0, 0, 10, '10em');
        var heightAsPx = rect.asPX("height");
        expect(heightAsPx).to.be(160); // assumes 1em = 16px, is this safe?
    });

IE 10: Demo - Croc infographic missing some graphics

See attached screenshot. Works fine with Chrome

Element.removeData without key fails to remove all data from element

According to the API docs Element.removeData should remove all the data from the element, but in this test it leaves part of the data.

https://github.com/adobe-webplatform/savage/blob/db9eb2e8a2eefdceb1b8f727c4f1aa8f73979b6e/test/element.js#L175

Change project description

Change the project description to:

A JavaScript library for modern SVG graphics.

API Reference for Matrix.add incorrect

Currently it appears as:
Matrix.add(a, b, c, d, e, f, matrix)

which based on the code should be split to accepting either a-f params or just the matrix.

Set.exclude returns undefined instead of false

I know, this one's kind of nitpicky, but since the docs say it returns a boolean, it's technically failing. :)

Test:
https://github.com/adobe-webplatform/savage/blob/b04c154dfeb32f6c4534ba2136115455c56933e4/test/set.js#L28

Animated map demo works differently in Firefox

The map is positioned differently and moves off the bottom of the screen. (Low priority.)

Documentation for Snap constructor

The docs for Snap skip over the constructor options.

Inconsistancy between Element.clone implementation and documentation

The API docs say Element.clone creates and returns a element, but the implementation uses cloneNode to copy the element, without a element being created.

Set.splice removes 3 items when count is set to 2

Test:
https://github.com/adobe-webplatform/savage/blob/b04c154dfeb32f6c4534ba2136115455c56933e4/test/set.js#L80

Element.unhover does not appear to remove events

See test:
https://github.com/adobe-webplatform/savage/blob/fd8db10bd352f804917fe7de0715a39551addd69/test/element.js#L578

API Reference for Savage.path.bezierBBox is incorrect

The docs claim the returned output is an object with a certain format, instead it returns a BBox object that does not match that format. I assume the docs here are incorrect, rather than the behavior.

IE 10 - Animated game: dice doesn't animate

works fine on chrome though

Savage.findDotsAtSegment does not exist

The docs mention a Savage.findDotsAtSegment but this should probably be Savage.path.findDotsAtSegment

Remove .DS_Store files from repo

And add to your .gitignore file.

mina.getById throws error: anim is not defined

Looks like the code should be:
return animations[id] || null;

instead of:
return animations[anim.id] || null;

Test:
https://github.com/adobe-webplatform/savage/blob/b04c154dfeb32f6c4534ba2136115455c56933e4/test/mina.js#L43

Create a "demos" directory

Create a "demos" directory for the samples. Create directories for each demo so the HTML and SVG assets are together. Name the demo directories something descriptive (i.e. "map", "barista", etc.).

consider a package manager

npm / component / bower or something so that the little chunks are useful to people (and to keep yourself sane), then produce a snap build from those. Otherwise looks good! :D

The animated-game demo doesn't work in Firefox

Let's debug. If it's a bug in Snap, please assign to Dmitry.

Setting "class" attribute on a group element using attr() has no effect

This is also causing my innerSVG test to fail, after finding that I split it up into a new test.

See test:
https://github.com/adobe-webplatform/savage/blob/440f4cef941b76518d3de384c70959c6d959ef8c/test/element.js#L151

Undefined variable "lowerCase" in pathToRelative function

See here:
https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L552

Looks like it's expected to be String.prototype.toLowerCase

Add a link to the browsable docs to the README

Let's make the docs browsable (a GitHub page?) and put a link in the README.

Savage.pathBBox does not exist

API docs refer to Savage.pathBBox, this should probably be changed to Savage.path.getBBox or added as an alias.

Add ability to animate transforms in SVG and in Matrix formats.

Element.onDragOver not working (in unit test)

Not sure if this is a problem with the way I'm testing the method, but I would expect it to work.

Test:
https://github.com/adobe-webplatform/savage/blob/440f4cef941b76518d3de384c70959c6d959ef8c/test/element.js#L600

Using Element.animate() with easing and callback fails

Seems like the callback never gets called. Works fine with only easing/callback or neither, but problem occurs when supplying both.

Test:
https://github.com/adobe-webplatform/savage/blob/630b66058d99e183192643fd16e6df03d66a1af0/test/element.js#L314

Mention of sudo with npm

The README should mention that you might need to use sudo with npm, depending on your configuration.

Espresso option for Coffee Maker demo throws error

Uncaught TypeError: Property '-72' of object # is not a function

stroke-dashoffset does not animate

following code does not animate line as it should:

var s = new Snap('100%', '100%');
myPath = s.path('M0,0c0,0,0-28.008,0-46.707S0-89,0-89');
myPath.attr({
'fill': 'none',
'stroke': 'red',
'stroke-width': 25,
'stroke-miterlimit': 10,
'stroke-linecap': 'round',
'opacity': 1,
'stroke-dasharray': "120 200",
'stroke-dashoffset': 0
});
myPath.transform('translate(100, 300)');
myPath.animate({'stroke-dashoffset': 120});

IE 10 - Getting Started: forward button often gets stuck at step 2 and 3

IE10, Getting Started - clicking forward button often gets stuck at step 2 and 3. Works fine with Chrome

Create a "getting started" guide

Write a getting started guide for the site, and link to it from the README. It should include:

Getting the repo (or downloading the zip file).
Building it with grunt.
Including the library.
Initializing Snap.
Drawing a couple of shapes.
Animating them.

Write it up, and send it to Yohei for inclusion on the site.

Snap logo is throwing an error

Very high priority.

The snap-mascot demo isn't working. Mousing over the mascot throws this error:

Uncaught TypeError: string is not a function: snap.svg-min.js 18

Remove code callouts on Coffee Maker demo

We decided to get rid of the code callouts on the coffee maker demo, so please remove them.

Transform object "string" property returns array instead of string

Unlike the docs claim, the "string" property in the object returned by Element.transform() is an array of strings, rather than a string.

Test:
https://github.com/adobe-webplatform/savage/blob/630b66058d99e183192643fd16e6df03d66a1af0/test/element.js#L370

Element.prepend prepends element to parent rather than self

Should be easily fixed by replacing this.node.parentNode with this.node

Test: https://github.com/adobe-webplatform/savage/blob/eea4f89d29c5df1fa53f721022a878bb2ca3d9bb/test/element.js#L56

Make Coffee Maker demo labels clickable

People won't always know to "twist" (drag) the knob. Please make the labels clickable, as well.

Savage.filter.shadow fails to correctly process when given color param but not blur

Test here:
https://github.com/adobe-webplatform/savage/blob/531fca593769a696502be3ede2d5dbe424fc3dee/test/filter.js#L68

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.