snap.svg

Snap.svg - Stop hover event retriggering on a sub-element of the hoverable Element

由 我怕爱的太早我们不能终老 提交于 2019-12-05 10:22:48
For a project, I'm using SVG shapes that consist of a background polygon and some text (which i have converted to paths) above my background poly. I am using Snap.svg to animate my shapes. When I hover over my poly, the shape is supposed to scale to a specific size, including everything inside it. On mouseout, the shape scales back to its original size. Here you can find a simplified example: http://jsfiddle.net/XwwwU/11/ I have implemented it like so: SVG/HTML <svg> <g class="el"> <polygon fill="#C7B299" points="114.558,206 82.115,149.5 114.558,93 179.442,93 211.885,149.5 179.442,206 "/>

snap svg : change viewBox using parameters

由 你离开我真会死。 提交于 2019-12-05 09:39:56
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 syntax. I also tried : worldMap.attr({viewBox:x, y, wi, hi); worldMap.attr({viewBox:{x, y, wi, hi});

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

由 帅比萌擦擦* 提交于 2019-12-05 08:06:01
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'); }); GillesC From this post jQuery SVG-object tag load event It seems like jQuery simply prevents to bind a "load" event to a non-image-or-document element

Bounding snap.svg element to svg area

由 我的梦境 提交于 2019-12-04 20:57:21
I am new to snap.svg and I have been able to make my circle and make it draggable but I can drag it out of the area I gave my svg and then it is lost on the page. How can I bound it so that it can not go out of the area I gave for my svg? Here is my basic code: <body> <svg id="svg" style="width:700px; height:600px;"></svg> </body> <script> var s = Snap('#svg') var circle = s.circle(150, 150, 100) circle.drag(); </script> Thanks for your help! Just in case someone stumbles upon this one, I had a play with something a while back that may help...its a bit overkill, but it can be simplified

Animate dotted path, one dot after another

由 家住魔仙堡 提交于 2019-12-04 17:13:26
I'm using the latest version of Snap.svg to draw and animate a path within a SVG: var s = Snap('#svg'); var getPath = s.path('M15 15L115 115'); var pathLength = getPath.getTotalLength(); getPath.attr({ stroke: '#000', strokeWidth: 5, strokeDasharray: pathLength + ' ' + pathLength, strokeDashoffset: pathLength, strokeLinecap: 'round' }).animate({ strokeDashoffset: 0 }, 1500); While this is working fine (as you can see here ), I want to make it a dotted line, animated one dot after another. I've built a quick prototype with circles (which you can see here ), to illustrate the look and feel, but

Getting SVG container size in snapSVG?

由 为君一笑 提交于 2019-12-04 14:42:26
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: <div id="myContainer" style="width: 900px; height: 100px" /> And then the Javascript code: function initViewer(elementId) { var element, elementRef, snap; elementRef = '#' + elementId; element = $(elementRef); element.append('<svg style="width: ' + element.width() + 'px; height: ' + element.height() + 'px; border: solid 1px black;"/>'); snap = Snap(elementRef + ' svg'); console.log(snap.getBBox()); } What I observe here is the bounding box has '0' for

Loop an animation with Snap.svg

由 拈花ヽ惹草 提交于 2019-12-04 13:34:14
问题 Background : I'm using Snap.svg to render a circle, then animate its radius on hover. I've got that piece working with the code below. Problem : I'm trying to get a looping "pulse" effect once circleRadar is hovered on, which would involve continuously animating between the initial r and the new r of 70. While the docs' mention of snap.animate(from, to,...) here seems promising, I can't figure out how I would implement that in the context of my code. Is there anyone a little more familiar

Snap SVG - Moving a loaded element around

由 不打扰是莪最后的温柔 提交于 2019-12-03 12:57:41
问题 I am trying to use Snap SVG library to move an element in an SVG graphic around the screen. This is the code of the element: <g id="butterfly"> <path id="wings" fill="#FFFFFF" stroke="#CFEA90" stroke-width="4" stroke-miterlimit="10" d="M139.741,74.038c-5.847-1.477-11.794,1.029-14.605,5.736c-0.463-5.791-5.095-10.963-11.275-12.115c-7.017-1.309-13.365,3.059-14.179,9.755c-0.654,5.381,2.469,10.622,7.36,13.155c-0.143,0.146-0.28,0.284-0.403,0.402c-3.157,3.055-2.81,7.082,0.777,8.994c3.586,1.912,9.053

Snap SVG - Moving a loaded element around

由 蓝咒 提交于 2019-12-03 03:16:20
I am trying to use Snap SVG library to move an element in an SVG graphic around the screen. This is the code of the element: <g id="butterfly"> <path id="wings" fill="#FFFFFF" stroke="#CFEA90" stroke-width="4" stroke-miterlimit="10" d="M139.741,74.038c-5.847-1.477-11.794,1.029-14.605,5.736c-0.463-5.791-5.095-10.963-11.275-12.115c-7.017-1.309-13.365,3.059-14.179,9.755c-0.654,5.381,2.469,10.622,7.36,13.155c-0.143,0.146-0.28,0.284-0.403,0.402c-3.157,3.055-2.81,7.082,0.777,8.994c3.586,1.912,9.053,0.985,12.211-2.071c0.836-0.809,1.773-2.517,2.632-4.62c-0.068,2.586,0.13,4.835,0.632,6.038c1.724,4.127

How to use Snap.svg with Angular v4.0

由 痴心易碎 提交于 2019-12-03 00:24:15
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="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke
订阅 snap.svg