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
2 answers

Snap.svg: How can I skew an element?

I am new to Snap.svg and I am trying to skew a simple rectangle, but I can't figure out how. I already searched in the docs. This is what I have so far: /* stage */ var s = Snap('#mysvg'); s.clientRect = s.node.getBoundingClientRect(); …
Marten Zander
  • 2,385
  • 3
  • 17
  • 32
3
votes
1 answer

Two different views of the same svg drawing

I want to make a fairly large diagram using SVG (I have been using Snap.svg in JavaScript). I'd like to display a zoomable portion of the diagram in an element, and also a smaller version of the whole thing in a different element, in which the user…
Tim Erickson
  • 582
  • 5
  • 15
3
votes
1 answer

snap svg gluing line endpoints for drag and drop

I've got two visual objects that I can drag. I want to "glue" a line between them so that when I drag one object the line adjusts and stays stuck to the same relative point on the dragged object (think node-red, jointjs, cad/cam). The visual…
3
votes
1 answer

Get New path after applying the translate rotate and scale on arc SVG

I want to get new Path (Arc) point after applying the translate rotate and scale on the path . I am Putting an example: MY Path is shown like This AS You seen Translate ,rotate and scale is applied on my path. I am using this code for getting…
Nitesh singh
  • 915
  • 11
  • 21
3
votes
2 answers

Getting SVG container size in snapSVG?

What is the correct way to get the size of the 'paper' object with SnapSVG, as soon as it has been created? My HTML looks something as follows:
And then the Javascript code: function…
Andre M
  • 6,649
  • 7
  • 52
  • 93
3
votes
1 answer

How can I cut text from a shape in SVG?

I have an SVG file that looks like below: Is there a way to make the text transparent? That is, instead of a fill color I want to cut out the layers and show what's in the background (of the SVG i.e. whatever lies underneath the SVG). In other…
MojoJojo
  • 3,897
  • 4
  • 28
  • 54
3
votes
1 answer

SVG pattern animation

I have defined a pattern in svg. I want to rotate it continuously.... I'm not able to apply animation on that pattern definition. i applied same animation to a symbol , it works but its not working on pattern...
Theprash
  • 147
  • 1
  • 2
  • 9
3
votes
1 answer

How to remove an element after you do append()

I am working with snap svg and I see in the docs that there is a way to append() and remove() the elements, but I don't have clear how to adapt it to my code _placeBet = () => { const tipChipSnap = snap('#chip-bet'); const tipChipSvgContent =…
Non
  • 8,409
  • 20
  • 71
  • 123
3
votes
1 answer

Masked element in Snap SVG doesn't come into view when translated

I have a group of elements that are masked by a rect in SnapSVG and I want to translate the elements, bringing new ones into view (and hiding ones that are currently in view). The code is really simple - here's a codepen:…
AustinC
  • 826
  • 1
  • 8
  • 23
3
votes
2 answers

SVG - Endless rotation takes wrong center point

I made a codepen with snap svg: Codepen I try to rotate a svg-gear in an endless-loop around his own centerpoint. This works on Internet Explorer, but fails on Mozilla-Firefox and Google-Chrome. The center point in Chrome and Firefox seems wrong…
JoGe
  • 872
  • 10
  • 26
3
votes
1 answer

Snap.svg Getting rotation from slope in point difference

I am working through an animation where I need to make this plane follow the path given and appear to be "circling" the earth. Here is the codePen, which as you can see is fairly simple. My problem is with angles, I am trying to see how much should…
Alain Jacomet Forte
  • 4,575
  • 6
  • 29
  • 41
3
votes
1 answer

JavaScript Animation: Handling Complex Animations That Use Callbacks & Loop

I'm using Snap.svg to animate 13 SVGs. All the SVGs start from one point and animate through several other animations (through callbacks). An simplified example of my animation is described, in code, below: var reset = function(person) { …
Enijar
  • 6,387
  • 9
  • 44
  • 73
3
votes
0 answers

Snap.svg how to get what element we are dragging over

I am using Snap.svg library and doing some drag & drop. My question is how do i get id of element that i am dragging over. I am trying to implement drag and drop and only selected areas are valid drop targets. I do not know how to check upon dragend…
Luka Mis
  • 543
  • 1
  • 7
  • 18
3
votes
1 answer

Snap.svg — remove an object when one of the elements was clicked

I have an object with 3 elements bound in one group and I need to remove this object (or at least it's graphical representation — the group) when green rectangle is clicked. The a.click() works, but c.click() doesn't and I'd like to know why: var s…
georgmierau
  • 157
  • 2
  • 9
3
votes
1 answer

AngularJS SVG line gradient not working

I have noticed a problem when building an SVG animation in an AngularJS project. What I want to create is a gradient effect over my path. The path element is created with SnapSVG and is applied and id of "progressLine". Styling of this element is…
JonasB
  • 328
  • 2
  • 11