Questions tagged [snap.svg]

Snap.svg is a JavaScript library for creating and working with SVG.

Snap.svg is an open source library for creating and working with . It helps create interactive vector graphics with support for interactivity, animations and also allows working with existing svg with a simple JavaScript API.

Snap.svg was written by Dmitry Baranovskiy (author of Raphaël), and is designed specifically for making it easier to work with svg, and supporting features like masking, clipping, patterns, full gradients, groups, and more. The project is released by Adobe Systems.

References:

Demo

Drawing styling and adding animation to a circle.

var s = Snap(500,500);
var circle = s.circle(150, 150, 100);

circle.attr({
    fill: "#bada55",
    stroke: "#000",
});
circle.animate({r: 50}, 1000);
784 questions
-2
votes
1 answer

Svg and snap basics

Any clue how can I make this more simple, so I can easily update the values? Sample: for (var i = 0; i < 10; i++) { var x = 40 * i; for (var t = 0; t < 8; t++) { var y = 40 * t, rectBg = canvas.rect(x,y,30,30); if (x === 0 && y == 160…
RicNunes
  • 51
  • 5
-2
votes
1 answer

How can I copy ALL the attributes and styling from one svg to another svg using js please?

The following code will copy ONE attribute: 'fill-rule' from svg(external svg) to snap paper(internal svg). How can I copy ALL the attributes and syling from one svg to another svg please? Any ideas would be greatly…
-3
votes
1 answer

Image clip to text

How can I clip an image to text? I would prefer a method that is available in any browser. I tried background-clip but it not available in all modern browsers.
Dan Ovidiu Boncut
  • 3,083
  • 4
  • 25
  • 45
-3
votes
1 answer

Why do I need to "use grunt to build"?

In this case I'm trying to use snap.svgsnap.svg library website to play around with svg manipulation. I've set up the library and it's running just fine so I don't understand why I need to use grunt, and what exactly it's building. It should be…
sjos
  • 53
  • 7
1 2 3
52
53