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
83
votes
3 answers

Snap.svg vs Svg.js

I have tried to find a proper SVG library for modern browsers. My goal is to decide, what library is suitable for creating simple online SVG editor with eg. text and path editing and clipping text with paths. I found two libraries, which may be…
Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
26
votes
2 answers

How do I understand Transform properties in snap.svg?

I have been trying to learn snap.svg and I have some doubts regarding the transform properties. My question is pretty stupid but here it is In the following sample code, what do the the numbers mean? {"transform" : "t-10 0 s0 32 32"} …
Bazinga777
  • 5,140
  • 13
  • 53
  • 92
21
votes
2 answers

how to resize a large svg to fit inside a div

I have the following div inside .
I want to fit a 640X480 svg inside this div. I have tried this: var…
naheed
  • 495
  • 1
  • 4
  • 9
14
votes
3 answers

How do I update an SVG text element using Snap.svg?

I'm using Snap.svg to load an SVG image and add text elements to it. However, I need to be able to update the text elements as the page loads. Right now, I'm doing something like this: var svg = Snap("#selector"); var text; Snap.load(path_to_file,…
Andrew Hassan
  • 591
  • 2
  • 5
  • 15
14
votes
6 answers

Snap.svg - drag event handler

Question is about the onstart event handler for Element.drag in the newly announced Snap.svg. The intention of the code below is to register event handlers for the start and stop of a drag (onstart/onstop) on an svg object. var s =…
user1685529
  • 237
  • 1
  • 3
  • 11
13
votes
4 answers

Snap.load() external SVG fails to Load

PROBLEM: I'm using Snap.svg to create some basic interactive graphics, but for some reason I can't get my external SVG file to load using Snap.load(). I've pulled code straight from the tutorial at snap.io and checked and double-checked the docs. My…
Marcatectura
  • 1,721
  • 5
  • 30
  • 49
12
votes
2 answers

How to animate path morphs using snap.svg

I have been searching for a good example on how to animate a svg path morph. I know how to do do pretty complex ones using SMIL, but snap.svg is new and shiny, and everyone seems to love it, so I'd like to take a look. I can't find a good example…
Les Ballard
  • 283
  • 1
  • 4
  • 17
11
votes
4 answers

How to use Snap.svg with Angular v4.0

I don't know how to use snap.svg with Angular (created with angular-cli). I've tried to call Snap.svg in the index.html with CDN, import it in the component by adding : import 'snapsvg' but I always get this message : Uncaught TypeError: Cannot…
Swarovski
  • 581
  • 2
  • 8
  • 25
9
votes
1 answer

SVG animation appears "out of bounds" on IE & Edge

I'm having an issue that only appears to affect IE and Edge (tested on IE9-11 & Edge 12-13). I'm animating an SVG stroke offset with Snap.svg which seems to run fine but at certain points the stroke appears to go "out of bounds" and disappear. It's…
ndimatteo
  • 498
  • 5
  • 22
9
votes
1 answer

Snap.svg can't find dynamically (and successfully) appended SVG element with jQuery

Snap.svg doesn't work in this case : $('body').append($('').attr('id', 'test')) ; console.log($('#test').length) ; // 1 var svg = Snap('#test') ; svg.circle(100, 100, 50) ; // Uncaught TypeError: Object [object Object] has no method…
Tot
  • 873
  • 2
  • 13
  • 30
8
votes
1 answer

How to listen to a load event of an object with a SVG image?

I want to manipulate a SVG image after it's loaded with snap.svg. Unfortunately the callback of the load event is never called. How can I register a load event to the svg object? I have created this minimal example of my problem. HTML:
Robin
  • 8,162
  • 7
  • 56
  • 101
8
votes
1 answer

How to change the points of a polygon in Snap.svg through animation?

I'm trying to implement a button with a certain polygon on it, which when pressed changes the polygon to something else. For example the play icon on the button changing to stop icon. Ideally the icon should be a polygon with three points depicting…
Pradyumna
  • 105
  • 2
  • 7
8
votes
1 answer

Can Snap.svg be used just server side with Node.js? (Not through the browser)

I need to create and manipulate some SVGs just with some server-side code (like with cron jobs) but I'm wondering if it's possible to use Snap.svg in this scenario where it's not included in a web page. Will this work without Snap.svg being run in a…
Chad
  • 1,708
  • 1
  • 25
  • 44
8
votes
3 answers

Snap SVG - Moving a loaded element around

I am trying to use Snap SVG library to move an element in an SVG graphic around the screen. This is the code of the element:
MikO
  • 18,243
  • 12
  • 77
  • 109
8
votes
2 answers

Set ID attribute on a Snap.svg graphic

I'm using Snap.svg API and I have three graphics that I need to select in my CSS for styling purposes. Thus, to distinguish between them, I need to give them an ID or class name. This is how I create an element: var draw = Snap(100, 75); c =…
João Belo
  • 1,530
  • 2
  • 12
  • 16
1
2 3
52 53