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

How to make AngularJS event compatible in a SVG node?

I'm generating SVG nodes in my app. Now I'm struggling to add a compatible Angularjs event to a node. The idea is simple. I'm creating a new text svg node and when the user click on this text element I want to open a specific menu. But as expected…
Thiago C. S Ventura
  • 2,448
  • 1
  • 29
  • 43
3
votes
0 answers

The SVG pattern doesn't work with AngularJS $routeProvider

I'm using AngularJS to handle routes in a website that makes use of SVG. Through the $routeProvider I simply assign the template "/test_folder/test.html" to the route "/test" The problem is that, when I use the fake url, the pattern element stops…
commonUser
  • 599
  • 1
  • 6
  • 17
3
votes
0 answers

SVG Envelope Deformation with snap or another SVG js-library

Good Afternoon, Can I apply Envelope Deformation at some SVG grouping set or path or text? I'm looking a way to deform a SVG part with javascript with a group of coordinates/vectors. Similar to that:…
Thorvarium
  • 93
  • 5
3
votes
1 answer

Snap Svg Bounding Box and Transform Coordinates

I can't figure how to place a path relative to its sibling path's bounding box. Imagine a box like a window and I want to put a close button to the top right corner of it. Here is the box and close button grouped together after transforming the…
moonwalker
  • 1,157
  • 1
  • 18
  • 34
3
votes
1 answer

Moving SVG group in z space with Snap.svg

I am using Snap.svg to make elements of my SVG interactive. How can I move an Element.group group of shapes in 'front' of all my other shapes? This action will take place upon a hover. A simple JSFiddle example…
Danny
  • 475
  • 6
  • 19
3
votes
1 answer

It is possible to obtain a perfect svg circle from parts?

I've got 4 arcs of a circle which are generated using SnapSVG.js The problem is that between the upper arcs the gap is higher than the gap of lower arcs So my question is can I fix the gap between arcs and obtain a perfect circle using only CSS to …
Xtal
  • 295
  • 5
  • 20
3
votes
1 answer

snap.svg save svg to png

I am creating a Snap.svg app where users can basically add blocks and manipulate them then save it to a png. The blocks are all drawn in inches. I have code that calculates the device PPI and that is used to draw the blocks, it gets calculated to…
Trevor Orr
  • 927
  • 1
  • 14
  • 31
3
votes
1 answer

Place an Image inside a Polygon with Snap.svg

I have a polygon (in fact it's a hexagon) painted with Adobe's Snap.svg: var s = Snap('#test'); var hexagon = s.paper.polygon([ 0, 50, 50, 0, 100, 0, 150, 50, 100, 100, 50,…
akohout
  • 1,802
  • 3
  • 23
  • 42
3
votes
1 answer

SnapSVG animation callback on set of elements not firing

See JSfiddle! I am wanting to animate a set of elements and execute a callback when finished like so: s.selectAll('.active').animate( { transform: matrix }, 300, mina.linear, function() { //callback doesnt fire …
ngmir
  • 450
  • 6
  • 26
3
votes
1 answer

How to using Snap.svg and Snap.js via angular-snap together?

I try to use two dependencies: "snap.svg": "~0.2.0", # snapsvg.io "angular-snap": "~1.4.1", # jtrussell.github.io/angular-snap.js/ How I guess, it seems angular-snap uses a global Snap object as snap.svg and overrides the Snap object of…
wendelinwn
  • 71
  • 6
3
votes
0 answers

Setting a transform origin in snap.svg

I am making a hover effect, which involves changing a shape on mouseEnter and mouseLeave. Everything works fine, but the shape changes from its default pivot point - 50% 50%. I would like to know how to set the transform origin? I tried translating…
Georgi B. Nikolov
  • 976
  • 2
  • 13
  • 24
3
votes
2 answers

Snap SVG animate SVG on hover / reset SVG on leave

I'm using Snap.svg to create some SVGs that animate on hover. A very simplified jsfiddle is here: http://jsfiddle.net/62UA7/2/ var s = Snap("#svg"); var smallCircle = s.circle(100, 150, 70); //animation function animateSVG(){ …
traummaschine
  • 439
  • 8
  • 18
3
votes
1 answer

Snap.SVG how to stop all animations

I want to find a way of stopping all animations on all rectangle elements within the SVG when a certain element is clicked. I'm trying to use something like this: svg.select("rect").stop(); but I can't get that to work
Hello World
  • 1,102
  • 2
  • 15
  • 33
3
votes
1 answer

Snap SVG. Turn rect into an image mask and insert image

Please could someone suggest how I can transform a loaded rectangle into a mask for an image? I want to be able to create rectangles my svg in illustrator - so the size and position is setup prior to loading the svg I think this could work in the…
David Jennings
  • 301
  • 2
  • 10
3
votes
1 answer

Raphael transform animation not behaving

I'm doing an animated transform in Raphael (and Snap.svg, which does the same). If I apply a rotation to a basic element, it rotates normally as I would expect. However, if I already have a previous transform applied (even if its t0,0 or r0), the…
Ian
  • 13,724
  • 4
  • 52
  • 75