Stack Overflow
Stack Overflow

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

Snap.svg - Stop hover event retriggering on a sub-element of the hoverable Element

For a project, I'm using SVG shapes that consist of a background polygon and some text (which i have converted to paths) above my background poly. I am using Snap.svg to animate my shapes. When I hover over my poly, the shape is supposed to scale to…
Jacob Mellin
  • 323
  • 2
  • 7
5
votes
1 answer

Manipulate a path in Snap.svg or redraw it?

For a metaball animation like this one: http://paperjs.org/examples/meta-balls/ I am creating a path in snap.svg that connects two circles. It looks like this:
gang
  • 1,758
  • 2
  • 23
  • 36
4
votes
2 answers

How i can style SVG elements on hover?

I'm beginner in SVG. I'm trying to change style of multiple elements on hover at a specific element with css, but I can't, because elements using Shadow DOM. I have the following :
Ihor Yanovchyk
  • 768
  • 6
  • 13
4
votes
3 answers

snapsvg and requirejs, Cannot read property 'on' of undefined`

I'm using require and webpack on a project and want to use snapsvg but when I include it I get the error: Uncaught TypeError: Cannot read property 'on' of undefined Code is: var Snap = require('snapsvg'); SVG = Snap('#svg');
James
  • 131
  • 1
  • 8
4
votes
1 answer

Convert SVG to PNG with applied images as background to svg elements

I have an external SVG file which contains some embedded image tags in pattern. Whenever I convert this SVG into PNG using toDataURL(), the generated PNG images does not contain the image I have applied as pattern to some SVG paths. Is there any…
nilesh_ramteke
  • 135
  • 3
  • 8
4
votes
1 answer

Translating browser click event `x` and `y` coordinates to coordinates on a scaled Snap svg element

I needed to add a piece of text to an svg rendered by snap, at the point where the user clicks. Because the SVG is scaled using 100% width and uses the viewBox attribute, I needed to translate the x and y coordinates provided by the browser's click…
jaapz
  • 989
  • 8
  • 26
4
votes
2 answers

SnapSVG: Remove mask from an element (unmask)

I have my JS code in which I use Snap SVG. At some point I use element.attr({mask:maskelement}); In that snippet, element and maskelement are two elements inside my svg. Now I want to remove the mask. What would be the correct code that achieves…
Dennis
  • 1,061
  • 10
  • 21
4
votes
1 answer

Snap.svg determine drag distance along a path

As referenced here and updated for use with Snap.svg here, I'd like to better understand how the provided gradSearch function actually works (it's a bit over my head), and whether there are any good alternatives to this approach? gradSearch =…
Inator
  • 994
  • 2
  • 14
  • 33
4
votes
1 answer

how to use polygon in snap.svg

I'm trying to create a polygon(triangle) in snap.svg. I read the docs and I'm still not sure what to do. I see there's a polygon object in the docs, but there's no clear way in how to use it. Where would I put the points for my polygon? Would it…
user2856111
  • 205
  • 1
  • 4
  • 11
4
votes
1 answer

How does one write unit tests in Karma that interact with SVG graphics using Snap.svg?

I am working on a web app that uses SVG graphics for most of its display and interaction. I would like to use Karma to create unit tests that load an SVG asset, makes sure that certain groups/paths are present, etc. I haven't found any…
jmcmichael
  • 611
  • 1
  • 7
  • 11
4
votes
2 answers

How to sequence animations using snap.svg?

I'm trying to animate several objects in a sequence using http://snapsvg.io/. I want the first object to move, and once that's complete the second object to move etc. Instead with the following code everything animates simultaneously. var s =…
Tom R
  • 1,783
  • 2
  • 14
  • 14
4
votes
1 answer

Snap.SVG: How can I position path objects with (x, y) like we do with circles and rects?

I have an SVG container serving as my Paper that fills the entire page. In this container I am displaying elements in a grid pattern. Let's say each shape fills a space that is 100 x 100 pixels large, and the grid is 500 x 500 pixels large. I would…
user3494572
  • 57
  • 2
  • 6
4
votes
1 answer

Does Snap work with templates

index.html file as below: This HTML is compiled with Handlebars
index.js file as below: var s = Snap("#svg"); var bigCircle = s.circle(150, 150, 100); When i executed my code. It is showing me following error: TypeError:…
Ashwin Hegde
  • 1,733
  • 4
  • 19
  • 49
4
votes
1 answer

SVG vs CANVAS (Snap.svg vs FabricJS)

I made a speedtest to compare Snap.svg (SVG) to FabricJS (CANVAS): http://jsbin.com/tadec/7 function dummy(). In Chrome SVG renders in 120 ms, while CANVAS renders in 1100 ms. SVG is 9x faster than CANVAS. Fabricjs.com page says in this example that…
Timo Kähkönen
  • 11,962
  • 9
  • 71
  • 112
4
votes
1 answer

How to model Snap.svg map in AngularJS?

I am making a web interface for a board game online. I want to load a Snap.svg map with Snap.load, ie asynchronously. After it loads, I want to add a watch to a property of the scope, and add some colour to the map according to the property (which…
FrontierPsycho
  • 743
  • 7
  • 25
1 2
3
…
52 53