FAQ Database Discussion Community


What is wrong with this snap svg plugin?

javascript,svg,raphael,snap.svg
I have this code : el.replace(/[0-9]*\.[0-9]*/g, function(x){ return (+x).toFixed(2) }) }; It works great on an individual svg path to trim its decimal places. Now I want to be able to trim all the paths from a paper(svg).To do that I am trying to make a snap svg plugin here:...

Snap SVG animating existing matrix

animation,svg,snap.svg
I use Snap.svg to create a simple card game. I loaded drawed cards from file and moved them to specific location using matrix translate. It's svg element now looks kinda like this: <g id="card11" inkscape:label="#g3908" transform="matrix(1.5621,0,0,1.5621,625.1085,529.3716)" cardposition="4" style="visibility: visible;" class="card inhand hand-4 ofplayer1">...</g> However, now I'm trying to animate them...

Snap SVG Iterate over Object to build Animate properties

javascript,svg,snap.svg
I'm looking to write a function involving Snap SVG that would allow me to pass in an object or array of values through which I can iterate to build the animation properties. For example, if I could pass: [transform: 't100,100', transform: 'r10,10,10'] Into this: animateElementWithSnap: function(element, parentSVG, animationValues, duration, easing)...

Transform rotate in snap svg

javascript,transform,snap.svg,rotatetransform
Here is a JS FIDDLE where I am trying to rotate one of the cogwheel, but it rotates by moving to a different point. I tried different values to rotate it from the center without any luck. Any help will be very appreciated. code var s = Snap("#main"); var orange...

Resizing SVG animation while keeping it centered in its container

css,svg,snap.svg
I'm trying to center the <path> animation horizontally and vertically (after having scaled it down with transform="scale(0.5)) while keeping the <svg> at 100% width and height of its container. I'm using Snap.svg. As you can see below, the <svg> is fine but the <path> is all crammed up in the...

how to mimic mouseover listener for xy positions

snap.svg
I have a snap.svg grid of over 1600 20x20 pixel squares and am I'm trying to find the most efficient way of tracking when a moving point is within each. All I can come up with is looping through all the squares looking for isPointInside like so: for (var t...

Snap SVG - Animating a path element

animation,svg,snap.svg
I am looking to animate a path element inside an SVG using the Snap SVG library. I saw Snap has a few methods related to paths. Some include: Snap.path.getBBox(), Snap.path.getSubpath(), and Snap.path.map() I was trying to wrap my head around how to animate the path so that it starts as...

How to use this js svg parser to change the path's decimal places in an svg file or element to n decimals?

javascript,math,svg,raphael,snap.svg
There is this svg parser that does few svg optimization including changing an svg path's decimal places. if you use snap svg and make a path element : var paper = Snap("100%","100%").attr({"viewbox":"0,0,500,600"}); var pth =...

SVG height percentage not working under Linux browsers?

svg,snap.svg
The exact same code works under Windows with Chrome, FF and IE. I just switched to Linux and this code doesn't work neither on FF or Chrome? I tried the "style" tag, with no change in results. Can someone help? Is there a browser independent way of having 100%...

Snap SVG - Animating a Path in the opposite direction

svg,snap.svg
I am working on a path animation, but am stuck at how to accomplish it in reverse. http://jsfiddle.net/t1yu3mcn/1/ Currently, the red path starts at full length, and over time becomes shorter and shorter from the right direction. I want to accomplish the same animation but where the path gets shorter...

Snap drag position gets back to normal when dragged second time

jquery,css,svg,snap.svg
I am trying to make a curvy slider where one can click and drag a circle along a path. That is working fine but when i drag the circle after it has been dragged to certain position, it gets back to it's original position var s=Snap('svg'); animateAlongPath = function (path,...

Glow effect using snap svg

javascript,svg,setinterval,snap.svg,glow
I am trying to add a glow effect using snap SVG. Unlike raphael.js, I believe Snap doesn't support glow by default. However, there is a shadow effect. I tried to apply the shadow using set interval so that it mimics the behavior of a glow. But it is not working...

How to manipulate existing group elements with Snap.svg

javascript,svg,snap.svg
We have an existing svg-document in witch we want to replace a group-element with a new one. Is it possible to do with Snap.svg? var oldGroup = Snap.select("[id='" + oldGroupId + "']"); oldGroup.outerSVG(newGroup); //This is what I want to do but outerSVG is readonly ...

Working with SVG polygon defined by user

javascript,angularjs,svg,snap.svg
i want to take the number of polygon's sides and makes the polygon accordingly. Is there any way through which i can take the number of polygon's sides and make a SVG polygon depending on that. Any way i can do this way ??

rotation animation using snap svg

svg,snap.svg
I have seen this wonderful codepen about how to create svg loading animation through SMIL but I would like to do the same animation using Snap SVG library. So I create html as follows: document.addEventListener("DOMContentLoaded", function(){ var svgElem = document.querySelector("#loading"); var snapCanvas = Snap(svgElem); var innerArch = snapCanvas.select("#inner-arch"); innerArch.animate({transform: "rotate(360...

Snap.svg: Masking image in path makes a weird opacity and filter effect

javascript,html,html5,svg,snap.svg
I have this fiddle with the issue, I'm trying to achieve a normal mask for each path in order to animate after with Snap, the problem is that when I apply the mask the image becames B&W and reduces it's opacity. https://jsfiddle.net/adrianperez/agevu82g/1/ I have asked at the snap.js Google group...

Snap SVG .animate callback fires immediately

javascript,jquery,animation,svg,snap.svg
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 now, the element is removed...

Get current rotation in degrees of group in snap.svg

svg,rotation,snap.svg
how do i get the current rotation in degrees of a element in snap.svg? I can set a tranform but i find no easy way of getting a value. A typical group looks like this. <g transform="matrix(0.5154,0.5154,-0.5154,0.5154,64.3512,5.239)"><text x="0" y="0" style="font-size: 12px;">Change text</text></g> ...

snap svg animation unwanted cropping

javascript,css,animation,svg,snap.svg
I have an svg animated with snap - mina.elastic. Due to the nature of this animation the paths I'm animating go beyond the size of the svg and crops the shapes. I want to see the strech of the whole path animation. here is the HTML <svg width="130px" height="113px" viewBox="0...

Is there any method to find element by snap id in Snap svg?

javascript,raphael,snap.svg
In raphael there is a Paper.getById() method and it works well, but in Snap there is no such method and I can't find any analogue one. I see that Snap sets for every element on the paper the unique id something like this pathSian06waj35 . But I can't find any...

How can I save my generated svg code to a .svg file in the client machine?

javascript,svg,snap.svg
I used snap.svg library to generate, with javascript, a svg element in my asp.net web form page by loading other external .svg files and manipulating them in order to get the final svg element. Once the composition of the desired svg object is finish and the resulting svg element shows...

Apply transformation to result of previous transformation on SVG path

svg,transform,snap.svg
If I apply a translation of (100, 0) to an SVG path, it shifts left by 100px. But if I first rotate the path, then the translation happens along a diagonal. I understand why this happens -- the rotation has rotated the axes, thus making the translation along the x...

Rebind events in jsf after Ajax update (PrimeFaces and Snap.svg)

javascript,jsf,primefaces,snap.svg
I have created a custom component with Snap.svg.js that draws graphic on svg canvas. It works perfect but I have problem with events. I bind events such: var draughts = snap.selectAll("circle[fill~='" + draughtMineColor + "']"); draughts.forEach(function (draught) { draught.unhover(); draught.hover(function () { draught.animate({r: draughtRadius + 2}, 100, snap.easeIn); }, function...

Snap.svg text with textpath does not animate as expected

javascript,jquery,svg,snap.svg
I'm having an issue animating text using snap.svg. I'm moving text around an arc, from the bottom left of the arc to its apex. I'm using the standard Snap.animate functionality with its built-in setter function. When I animate a random element (such as the circle I've included in the examples...

Snap.load() callback function triggered too late in Safari

javascript,svg,safari,snap.svg
PROBLEM In my code MySymbolsObject.js - code reported inline just for example purposes - set a window.onload event in order to Snap.load() a svg file and save the svg fragment node in Symbols.resources The last inline <script> set a second window.onload event containing code that uses the svg node saved...

Invert mask with svg.js

javascript,svg,snap.svg,svg.js
I'm starting to use svg.js on a project, and as I was playing with masks, I couldn't manage to invert them. I drew a rectangle, and a circle, using the circle as a mask for the rectangle, only showing the part of the rectangle that's inside the mask. var leftRect...

An SVG rectangle with multiple holes using Snap.svg

javascript,svg,mask,snap.svg
I'm trying to get a rectangle with many (transparent, not just of the same color as the background!) round holes, but my code does the opposite. I know why, but I don know how to generate a suitable mask shape in this case: var s = Snap(500, 500); var rectangle...

Clickable outline around Snap SVG path

javascript,path,click,snap.svg,outline
Currently I create a small modeling tool using Snap SVG. var p = Snap.path(pathString).attr({fill:'none', stroke:'black', strokeWidth:1}); creates connections between other elements. Every element, including the paths are clickable. Since it is hard to click exactly the path I tried to create an invisible outline around the path using Snap.filter.shadow so...

firefox 35.0.1: svg mask animation doesn't work

firefox,animation,svg,mask,snap.svg
after my firefox update to version 35.0.1 my svg animations doesn't work in firefox, but it was working in previous versions and it still works in firefox beta (36), nightly (37.0a2) and other browsers (opera, chrome, safari, modern ie): html: <svg version="1.1" id="logo-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55px" height="53.758px" viewBox="-1061.986...