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

How to find a new path (shape) from intersection of SVG paths?

I need to intersect 2 SVG paths and get path with thier intersection. It should work in browser or in Node.js (any of them, not both). I need intersection, usage of clip-path isn't ok. If by some reason intersection will use transform it's ok (I'll…
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
7
votes
6 answers

Svg (snapsvg) creating a speech bubble

I am creating a chat program with some figures on the screen moving around chatting with other people. One of the last things I need to complete this project is when ever a person says something it is put into a scaleable speech bubble. Since I'm…
Marc Rasmussen
  • 19,771
  • 79
  • 203
  • 364
7
votes
4 answers

Creating a Snap.svg object from an element
The documentation for Snap.svg's Snap() function lists three possible ways of creating a Snap object. Snap(width, height) - Creates a new, blank canvas of given dimensions. Snap(svg element) - Create a Snap canvas from an existing, inline SVG…
MartinAnsty
  • 383
  • 2
  • 9
7
votes
3 answers

Get coordinates of svg group on drag with snap.svg

I'm brand new to svg and thought I would try out snap svg. I have a group of circles that I am dragging around, and am looking to get the coordinates of the group. I am using getBBox() to do this, but it isn't working as I would expect. I would…
landland
  • 2,117
  • 3
  • 20
  • 26
6
votes
2 answers

SVG gets cropped

So I just recently got into SVG and I'm having a couple problems related to the fact that instead of being resized to fit the container, my SVG image gets cropped out instead. HTML: Eye
Hissvard
  • 488
  • 7
  • 24
6
votes
1 answer

How to select fragments of an existing SVG using Snap.svg

I'm trying to run Snap.svg locally, but the Snap.load() function makes an AJAX request, which isn't allowed locally (in Chrome, anyways). Below is my code: window.onload = function () { var s = Snap("#headDiv"); Snap.load("emotions.svg",…
Aaron
  • 531
  • 3
  • 8
  • 22
5
votes
1 answer

SVG with size in px and percentage?

I'm trying to create an SVG element with a width defined by a percentage of the parent and a fixed value, say 50% + 20px. For normal html elements, in the CSS you can use calc(50% + 20px). Is there an equivalent way to do this for embedded SVGs?…
Julia Ebert
  • 1,583
  • 1
  • 21
  • 39
5
votes
2 answers

Adobe Animate Snap SVG plugin - huge files

I'm trying to use the Snap.SVG plugin for Adobe Animate CC for the first time and I'm getting a huge JSON file as output. My file is simple, I have a square in the middle of the canvas and it's rotating from 0 degrees to 360 degrees. There are 145…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
5
votes
1 answer

how to align stroke only inside of the svg path?

Is there any option in SVG to make stroke inside to the element ? #html-cup { stroke: #f00; stroke-opacity: 0.5; stroke-width: 4px; fill: #666666; }
Mo.
  • 26,306
  • 36
  • 159
  • 225
5
votes
2 answers

snap svg : change viewBox using parameters

what is the correct syntax to supply a viewBox attribute of an svg element using pre-defined values? I have this : var mySvg=Snap("#mySvg"); var worldMap=mySvg.select("#worldMap");//worldMap is an svg inside svg when i tried this : …
Rickard
  • 426
  • 7
  • 23
5
votes
1 answer

Snap SVG .animate callback fires immediately

I am trying to pass a set of arguments to an animate function within Snap SVG including a callback function. However, the callback (in this case is to remove the element) fires immediately on click and not after the animation has completed. As it is…
Yuschick
  • 2,642
  • 7
  • 32
  • 45
5
votes
1 answer

Simulate click event on an svg group

I have created a group using Snap.svg. shape = paper.rect(225, 50, 100, 50, 10, 10); text = paper.text(253,82, "text") myGroup = paper.g(shape, text); myGroup.click(toggleSelection); When I actually click the group with my mouse the toggleSelection…
Phil
  • 97
  • 1
  • 2
  • 10
5
votes
2 answers

Create multiple lines of text with Snap.svg

I have not been able to figure out how to create multiple lines of text with a single paper.text element in Snap.svg. I have tried using the techniques mentioned for raphael.js, such as \n, but that doesn't do a thing for snap.svg. I have tried…
cracker
  • 53
  • 1
  • 4
5
votes
1 answer

How to preserve spaces in svg text

To preserve spaces in a textelement of svg, one should use 'xml:space="preserve"' as an attribute of the text (jsfiddle). However, it isn't working. What am I doing wrong? // init snap var svgElement=document.getElementById("mainSvgId"); …
user3756754
  • 65
  • 1
  • 5
5
votes
1 answer

How to convert a cubic bezier value to a custom mina easing (snap.svg)

I'm trying to create custom easing for a snap.svg animation. I looked at the documentation (http://snapsvg.io/docs/#mina), but it's not clear to me how I could convert a CSS3 style cubic-bezier (for example: cubic-bezier(0.17, 0.67, 0.25, 0.99)) to…
arrow
  • 174
  • 3
  • 15
1
2
3
52 53