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
0
votes
1 answer

Create a group that doesnt depend on a Snap instance

Here is what I want to do : var a = Snap("#id"); var group = new SnapGroup(); // unfortunatly didnt find how to do it // for some reasons i dont want to do a.group(); group.circle(5,5,5); a.add(group); Here is what I did : var a = Snap("#id"); s…
gsouf
  • 901
  • 10
  • 25
0
votes
1 answer

How to reset a svg coordinates on clicking a second time in Snap.svg

I want to create an icon that turns into a close button when clicking on it and on clicking again on the button, it turns into the original icon again. So far I have managed to do the first part of the code. I know that I can use an if else…
Bazinga777
  • 5,140
  • 13
  • 53
  • 92
0
votes
2 answers

Snap.load() local SVG fails to Load

I am using the example HTML file called tutorial from the adobe-webplatform Snap.svg / demos / tutorial on Github. I changed the location of mascot.svg so that it will point to the local file. However my SVG file will not load and I get this error…
0
votes
2 answers

snapsvg .drag() attr definitions

I'm just starting with snap.svg. The element.drag() function provides a set of defaults if no parameters are passed, otherwise you have to define your own onmove, onstart and onend functions. The parameters for onmove(dx,dx,x,y,event) can be used…
TwoBears
  • 71
  • 2
  • 6
0
votes
0 answers

Snap.svg : Can't animate object

I am trying to animate an object with snap.svg, it's showing but not scaling. Here's my code. It works only if I generate the object with code but not working with loaded svg objects. Why it's not being animated on hover? …
Anik
  • 2,692
  • 2
  • 22
  • 25
0
votes
1 answer

Angular.js - How to use directive in another directive?

I want to use directive in another directive. The parent directive uses child directive in its template. Here is my code. Html
Masamichi Ueta
  • 121
  • 1
  • 1
  • 7
-1
votes
1 answer

SVG Animations for dummies (AKA designers), or am trying too much

I'd like to be able to create animated SVG icons similar to this: I can do this using Animate CC, or alternatively with After Effects. But I am not a coder, and this is way over my head. I work at a company with a small team of devs and designers,…
Matt Bingham
  • 149
  • 1
  • 1
  • 2
-1
votes
2 answers

Using Snap.svg to scale a polygon

I have a polygon created below: var s = Snap('#test'); var polygon = s.polyline(200, 286, 250, 200, 350, 200, 400, 286, 350, 373, 250, 373); polygon.scale(2, 2); How do I get the polygon to scale? I want it to grow to twice its size from the…
cdub
  • 24,555
  • 57
  • 174
  • 303
-1
votes
1 answer

access object variable from method javascript

i have a problem accessing an array within an object method. While the log returns the value perfectly, the following line returns an error that allRect[n] is undefined. I suppose it has something to do with variable accessibility, but the fact that…
-1
votes
1 answer

What benefit does Snap.svg bring over HTML5 native SVG DOM API?

Is Snap.svg vs HTML5 native SVG DOM API relatively the same as jQuery vs HTML5 native DOM ? Other than cross browser differences, which I hope SVG is pretty well supported by any modern browsers (am I right?), what benefit does Snap.svg bring? What…
Henry
  • 32,689
  • 19
  • 120
  • 221
-1
votes
1 answer

how to replace text inside an svg using js?

in this code I am trying to load an svg file into snap paper and then convert it to a group by : replacing with ? how can I fix this to work please? var s1 = Snap('#svg1'); Snap.load(…
-1
votes
1 answer

snap.svg, jquery.svg arrow animation along a path leaving a trail (has rounded corners)

I have spent quite a bit of time going between snap.svg and jquery.svg trying to work out how to animate the following: An arrow that draws but leavs it's tail trail behind it Arrow has 90 degree bends but is on a curve So I got the path animation…
Darcey
  • 1,949
  • 1
  • 13
  • 22
-2
votes
1 answer

How to squeeze inline svg to user viewport?

I have been trying to integrate my interactive svg maps into my html pages, then a litle problem arise: when i put my (inline) svg into a standard, non responsive, html document, the inline svg automatically fits itself nicely into the user's…
Rickard
  • 426
  • 7
  • 23
-2
votes
1 answer

using snap svg, how can I calculate the whole paths of an svg file in pixels?

I want to find the sum of the length of all paths for an svg paths. And I have the following( the paths are put in an array): ... var totalPxl=0; for (var i=0; i < this.pathArray.length; i++){ var totalPxl =…
Bayan
  • 27
  • 1
  • 8
-2
votes
1 answer

Limiting a rotated object within boundary with snap SVG

I've managed to setup a FIDDLE where I gave an example how to bind an element within svg boundary. It's working fine when dragging a normal element(without rotation). But when I apply this to a rotated object, the problem arises: var s =…
Pritam
  • 16
  • 2
1 2 3
52
53