snap.svg

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

由 只谈情不闲聊 提交于 2019-12-09 12:59:27
问题 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 custom easing with Snap.svg 回答1: I think you would firstly need a cubic-bezier function, then its relatively simple to include. (Note I don't pretend to understand any of the cubic code, just trying to highlight how to use it, I also don't know how

How to use Snap.svg with Angular v4.0

由 a 夏天 提交于 2019-12-09 04:25:02
问题 I don't know how to use snap.svg with Angular (created with angular-cli). I've tried to call Snap.svg in the index.html with CDN, import it in the component by adding : import 'snapsvg' but I always get this message : Uncaught TypeError: Cannot read property 'on' of undefined Any idea ? EDIT Import : import 'snapsvg' Template : <svg id="test" width="100%" height="100%" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space=

An SVG rectangle with multiple holes using Snap.svg

由 北战南征 提交于 2019-12-08 23:12:36
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 = s.rect(10, 10, 250, 250, 0, 0).attr({'fill':'white', 'stroke':'white'}); var group = s.group(); group.append(s.rect(10,10,250,250).attr({ fill: 'white'})) for (i = 0; i < 5; i++) { for (j = 0; j < 5; j++) { s.circle(25+i*25, 25+j*25, 10).attr({'fill':'black', 'stroke':'black'}).appendTo(group); } } rectangle.attr({'mask':group}); I'm

An SVG rectangle with multiple holes using Snap.svg

由 六眼飞鱼酱① 提交于 2019-12-08 05:20:54
问题 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 = s.rect(10, 10, 250, 250, 0, 0).attr({'fill':'white', 'stroke':'white'}); var group = s.group(); group.append(s.rect(10,10,250,250).attr({ fill: 'white'})) for (i = 0; i < 5; i++) { for (j = 0; j < 5; j++) { s.circle(25+i*25, 25+j*25,

Can't add elements with SnapSVG to my Page

由 ε祈祈猫儿з 提交于 2019-12-08 04:58:49
问题 So I am using SnapSVG to manipulate (animate) my SVG File that i created with Inkscape. The animating of the different elements like a rectangle or circle is working completely fine. The problem that i have is when i try to add a new element like a rectangle with SnapSVG code it does not work and the whole screen is blank (everything disappears). Why do i have this problem? Is it even possible to add a new element with SnapSVG to a existing SVG File? Down below i showed you some code on how i

snap svg : change viewBox using parameters

由 走远了吗. 提交于 2019-12-07 06:44:35
问题 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 : worldMap.attr({viewBox:"760, 455, 132, 78"}); it works just fine. However when i tried it using parameters : var x=760; var y=455; var wi=132; var hi=78; worldMap.attr({viewBox:"x, y, wi, hi"); nothing happened, why? I belive the problem is to find the correct

How to listen to a load event of an object with a SVG image?

由 ￡可爱￡侵袭症＋ 提交于 2019-12-07 02:16:23
问题 I want to manipulate a SVG image after it's loaded with snap.svg . Unfortunately the callback of the load event is never called. How can I register a load event to the svg object? I have created this minimal example of my problem. HTML: <object data="http://upload.wikimedia.org/wikipedia/en/8/80/Wikipedia-logo-v2.svg" type="image/svg+xml" id="animation" /> Javascript: alert('loading'); $('#animation').on('load', function() { alert('loaded'); }); 回答1: From this post jQuery SVG-object tag load

Snap.svg in React - how to access the svg in a lifecycle method?

由 梦想与她 提交于 2019-12-06 11:06:09
I have an svg map component which I want to update whenever the props change. Adding and subtract classes on some of the paths... that sort of thing. Snap.svg seemed to be the way to go. If someone knows a better way I'd like to hear it! So here's my render method, and the two lines marked with frowns are the ones I want to get working in a lifecycle method such as ComponentWillReceiveProps render() { var map = Snap('#map'); Snap.load("images/map.svg", function(data){ if (map) { map.append(data); const a2047 = map.select('#a2047'); <---- :( a2047.attr({stroke:'yellow', strokeWidth:'6px'}) <---

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

由 限于喜欢 提交于 2019-12-06 04:56:46
问题 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 remove it myself). I think there is a library for that, but I found only svg-intersections - returns array of points, but I need path path-intersection - can't make it working - by some reason it always returns an empty array snap.svg - seems to

Raphael transform animation not behaving

由 狂风中的少年 提交于 2019-12-05 19:37:10
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 element seems to scale down and back up, as though it always has to fit in its previous bounding box or something. Here is an example fiddle var r1 = s.rect(0,0,100,100,20,20).attr({ fill: "red", opacity: "0.8", stroke: "black", strokeWidth: "2" }); r1.transform('t0,0'); // any transform leads to shrink on rotate... r1.animate({ transform: 'r90,50,50'
订阅 snap.svg