diff options
Diffstat (limited to 'dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html')
| -rw-r--r-- | dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html | 14816 |
1 files changed, 14816 insertions, 0 deletions
diff --git a/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html new file mode 100644 index 0000000..eed4bdd --- /dev/null +++ b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/bower_components/Snap.svg/doc/reference.html @@ -0,0 +1,14816 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <base href="http://snapsvg.io/docs/"> + <title>Snap.svg API Reference</title> + <link rel="shortcut icon" href="/assets/favicon.ico?v=1"> + <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> + <link rel="stylesheet" href="/assets/docs/fonts/stylesheet.css?v=201311041519"> + <link rel="stylesheet" href="/assets/docs/css/topcoat-desktop-light.css?v=201311041519"> + <link rel="stylesheet" href="/assets/docs/css/main.css?v=201311041519"> + <link rel="stylesheet" href="/assets/docs/css/dr.css?v=201311041519"> + <link rel="stylesheet" href="/assets/docs/css/prism.css?v=201311041519"> + <link rel="stylesheet" href="/assets/style/docs-header.css?v=201311041519"> + <script> + var _gaq = _gaq || []; + _gaq.push(['_setAccount', 'UA-44948757-1']); + _gaq.push(['_trackPageview']); + + (function() { + var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; + ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; + var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); + })(); + + function trackOutboundLink(link, category, action) { + try { + _gaq.push(['_trackEvent', category , action]); + } catch(err){} + + setTimeout(function() { + document.location.href = link.href; + }, 100); + } + </script> + </head> + <body class="light"> + + <header id="header"> + <div class="wrap"> + <a href="/" class="logo"> + <img src="/assets/images/logo.svg" alt=""/> + <span class="header">Snap.svg</span> + </a> + <nav> + <a href="/">Home</a> + <a href="/about/">Why Snap</a> + <a href="/start/" class="mobile-hide">Getting Started</a> + <a href="/docs/" class="mobile-hide selected">Docs</a> + <a href="/support/">Support</a> + <a href="/demos/" class="mobile-hide">Demos</a> + <a class="bt" href="/assets/downloads/Snap.svg-0.1.0.zip" onclick="trackOutboundLink(this, 'Download', '0.1');return false;">Download</a> + </nav> + </div> + </header> + +<!--[if lt IE 9]> +<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> + + <div id="wrapper"> + <div class="max-width"> + <div id="sideNav"> + <div class="combo"> + <input type="search" id="dr-filter" value="" placeholder="search" class="topcoat-search-input"> + </div> + <div id="pageNav"> + <ol id="dr-toc"> + + <li class="dr-lvl0"> + <a href="#Element" class="undefined"><span>Element</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.add" class="dr-method"><span>Element.add()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.addClass" class="dr-method"><span>Element.addClass()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.after" class="dr-method"><span>Element.after()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.append" class="dr-method"><span>Element.append()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.appendTo" class="dr-method"><span>Element.appendTo()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.asPX" class="dr-method"><span>Element.asPX()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.attr" class="dr-method"><span>Element.attr()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.before" class="dr-method"><span>Element.before()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.children" class="dr-method"><span>Element.children()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.click" class="dr-method"><span>Element.click()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.data" class="dr-method"><span>Element.data()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.dblclick" class="dr-method"><span>Element.dblclick()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.drag" class="dr-method"><span>Element.drag()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.hasClass" class="dr-method"><span>Element.hasClass()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.hover" class="dr-method"><span>Element.hover()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.inAnim" class="dr-method"><span>Element.inAnim()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.innerSVG" class="dr-method"><span>Element.innerSVG()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.insertAfter" class="dr-method"><span>Element.insertAfter()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.insertBefore" class="dr-method"><span>Element.insertBefore()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.marker" class="dr-method"><span>Element.marker()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.mousedown" class="dr-method"><span>Element.mousedown()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.mousemove" class="dr-method"><span>Element.mousemove()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.mouseout" class="dr-method"><span>Element.mouseout()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.mouseover" class="dr-method"><span>Element.mouseover()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.mouseup" class="dr-method"><span>Element.mouseup()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.node" class="dr-property"><span>Element.node</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.outerSVG" class="dr-method"><span>Element.outerSVG()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.parent" class="dr-method"><span>Element.parent()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.prepend" class="dr-method"><span>Element.prepend()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.prependTo" class="dr-method"><span>Element.prependTo()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.remove" class="dr-method"><span>Element.remove()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.removeClass" class="dr-method"><span>Element.removeClass()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.removeData" class="dr-method"><span>Element.removeData()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.select" class="dr-method"><span>Element.select()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.selectAll" class="dr-method"><span>Element.selectAll()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.stop" class="dr-method"><span>Element.stop()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.toDefs" class="dr-method"><span>Element.toDefs()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.toJSON" class="dr-method"><span>Element.toJSON()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.toPattern" class="dr-method"><span>Element.toPattern()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.toString" class="dr-method"><span>Element.toString()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.toggleClass" class="dr-method"><span>Element.toggleClass()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.touchcancel" class="dr-method"><span>Element.touchcancel()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.touchend" class="dr-method"><span>Element.touchend()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.touchmove" class="dr-method"><span>Element.touchmove()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.touchstart" class="dr-method"><span>Element.touchstart()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.type" class="dr-property"><span>Element.type</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.unclick" class="dr-method"><span>Element.unclick()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.undblclick" class="dr-method"><span>Element.undblclick()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.undrag" class="dr-method"><span>Element.undrag()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.unhover" class="dr-method"><span>Element.unhover()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.unmousedown" class="dr-method"><span>Element.unmousedown()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.unmousemove" class="dr-method"><span>Element.unmousemove()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.unmouseout" class="dr-method"><span>Element.unmouseout()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.unmouseover" class="dr-method"><span>Element.unmouseover()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.unmouseup" class="dr-method"><span>Element.unmouseup()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.untouchcancel" class="dr-method"><span>Element.untouchcancel()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.untouchend" class="dr-method"><span>Element.untouchend()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.untouchmove" class="dr-method"><span>Element.untouchmove()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.untouchstart" class="dr-method"><span>Element.untouchstart()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Element.use" class="dr-method"><span>Element.use()</span></a> + </li> + + <li class="dr-lvl0"> + <a href="#Fragment" class="undefined"><span>Fragment</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Fragment.select" class="dr-method"><span>Fragment.select()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Fragment.selectAll" class="dr-method"><span>Fragment.selectAll()</span></a> + </li> + + <li class="dr-lvl0"> + <a href="#Matrix" class="undefined"><span>Matrix</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.add" class="dr-method"><span>Matrix.add()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.clone" class="dr-method"><span>Matrix.clone()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.determinant" class="dr-method"><span>Matrix.determinant()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.invert" class="dr-method"><span>Matrix.invert()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.rotate" class="dr-method"><span>Matrix.rotate()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.scale" class="dr-method"><span>Matrix.scale()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.split" class="dr-method"><span>Matrix.split()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.toTransformString" class="dr-method"><span>Matrix.toTransformString()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.translate" class="dr-method"><span>Matrix.translate()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.x" class="dr-method"><span>Matrix.x()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Matrix.y" class="dr-method"><span>Matrix.y()</span></a> + </li> + + <li class="dr-lvl0"> + <a href="#Paper" class="undefined"><span>Paper</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.clear" class="dr-method"><span>Paper.clear()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.el" class="dr-method"><span>Paper.el()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.filter" class="dr-method"><span>Paper.filter()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.g" class="dr-method"><span>Paper.g()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.gradient" class="dr-method"><span>Paper.gradient()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.group" class="dr-method"><span>Paper.group()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.line" class="dr-method"><span>Paper.line()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.mask" class="dr-method"><span>Paper.mask()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.polygon" class="dr-method"><span>Paper.polygon()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.polyline" class="dr-method"><span>Paper.polyline()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.ptrn" class="dr-method"><span>Paper.ptrn()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.svg" class="dr-method"><span>Paper.svg()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.symbol" class="dr-method"><span>Paper.symbol()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.toDataURL" class="dr-method"><span>Paper.toDataURL()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.toString" class="dr-method"><span>Paper.toString()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Paper.use" class="dr-method"><span>Paper.use()</span></a> + </li> + + <li class="dr-lvl0"> + <a href="#Set" class="undefined"><span>Set</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.animate" class="dr-method"><span>Set.animate()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.bind" class="dr-method"><span>Set.bind()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.clear" class="dr-method"><span>Set.clear()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.exclude" class="dr-method"><span>Set.exclude()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.forEach" class="dr-method"><span>Set.forEach()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.pop" class="dr-method"><span>Set.pop()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.push" class="dr-method"><span>Set.push()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Set.splice" class="dr-method"><span>Set.splice()</span></a> + </li> + + <li class="dr-lvl0"> + <a href="#Snap" class="undefined"><span>Snap</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.Matrix" class="dr-method"><span>Snap.Matrix()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.acos" class="dr-method"><span>Snap.acos()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.ajax" class="dr-method"><span>Snap.ajax()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.angle" class="dr-method"><span>Snap.angle()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.animate" class="dr-method"><span>Snap.animate()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.animation" class="dr-method"><span>Snap.animation()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.asin" class="dr-method"><span>Snap.asin()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.atan" class="dr-method"><span>Snap.atan()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.atan2" class="dr-method"><span>Snap.atan2()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.closestPoint" class="dr-method"><span>Snap.closestPoint()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.color" class="dr-method"><span>Snap.color()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.cos" class="dr-method"><span>Snap.cos()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.deg" class="dr-method"><span>Snap.deg()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.filter" class="undefined"><span>Snap.filter</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.blur" class="dr-method"><span>Snap.filter.blur()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.brightness" class="dr-method"><span>Snap.filter.brightness()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.contrast" class="dr-method"><span>Snap.filter.contrast()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.grayscale" class="dr-method"><span>Snap.filter.grayscale()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.hueRotate" class="dr-method"><span>Snap.filter.hueRotate()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.invert" class="dr-method"><span>Snap.filter.invert()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.saturate" class="dr-method"><span>Snap.filter.saturate()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.sepia" class="dr-method"><span>Snap.filter.sepia()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.filter.shadow" class="dr-method"><span>Snap.filter.shadow()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.format" class="dr-method"><span>Snap.format()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.fragment" class="dr-method"><span>Snap.fragment()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.getElementByPoint" class="dr-method"><span>Snap.getElementByPoint()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.getRGB" class="dr-method"><span>Snap.getRGB()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.hsb" class="dr-method"><span>Snap.hsb()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.hsb2rgb" class="dr-method"><span>Snap.hsb2rgb()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.hsl" class="dr-method"><span>Snap.hsl()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.hsl2rgb" class="dr-method"><span>Snap.hsl2rgb()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.is" class="dr-method"><span>Snap.is()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.len" class="dr-method"><span>Snap.len()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.len2" class="dr-method"><span>Snap.len2()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.load" class="dr-method"><span>Snap.load()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.matrix" class="dr-method"><span>Snap.matrix()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.parse" class="dr-method"><span>Snap.parse()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.parsePathString" class="dr-method"><span>Snap.parsePathString()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.parseTransformString" class="dr-method"><span>Snap.parseTransformString()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.path" class="undefined"><span>Snap.path</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.bezierBBox" class="dr-method"><span>Snap.path.bezierBBox()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.findDotsAtSegment" class="dr-method"><span>Snap.path.findDotsAtSegment()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.getBBox" class="dr-method"><span>Snap.path.getBBox()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.getPointAtLength" class="dr-method"><span>Snap.path.getPointAtLength()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.getSubpath" class="dr-method"><span>Snap.path.getSubpath()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.getTotalLength" class="dr-method"><span>Snap.path.getTotalLength()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.intersection" class="dr-method"><span>Snap.path.intersection()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.isBBoxIntersect" class="dr-method"><span>Snap.path.isBBoxIntersect()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.isPointInside" class="dr-method"><span>Snap.path.isPointInside()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.isPointInsideBBox" class="dr-method"><span>Snap.path.isPointInsideBBox()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.map" class="dr-method"><span>Snap.path.map()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.toAbsolute" class="dr-method"><span>Snap.path.toAbsolute()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.toCubic" class="dr-method"><span>Snap.path.toCubic()</span></a> + </li> + + <li class="dr-lvl2"> + <a href="#Snap.path.toRelative" class="dr-method"><span>Snap.path.toRelative()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.plugin" class="dr-method"><span>Snap.plugin()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.rad" class="dr-method"><span>Snap.rad()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.rgb" class="dr-method"><span>Snap.rgb()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.rgb2hsb" class="dr-method"><span>Snap.rgb2hsb()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.rgb2hsl" class="dr-method"><span>Snap.rgb2hsl()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.select" class="dr-method"><span>Snap.select()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.selectAll" class="dr-method"><span>Snap.selectAll()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.sin" class="dr-method"><span>Snap.sin()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.snapTo" class="dr-method"><span>Snap.snapTo()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#Snap.tan" class="dr-method"><span>Snap.tan()</span></a> + </li> + + <li class="dr-lvl0"> + <a href="#mina" class="dr-method"><span>mina()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.backin" class="dr-method"><span>mina.backin()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.backout" class="dr-method"><span>mina.backout()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.bounce" class="dr-method"><span>mina.bounce()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.easein" class="dr-method"><span>mina.easein()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.easeinout" class="dr-method"><span>mina.easeinout()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.easeout" class="dr-method"><span>mina.easeout()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.elastic" class="dr-method"><span>mina.elastic()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.getById" class="dr-method"><span>mina.getById()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.linear" class="dr-method"><span>mina.linear()</span></a> + </li> + + <li class="dr-lvl1"> + <a href="#mina.time" class="dr-method"><span>mina.time()</span></a> + </li> + + </ol> + </div> + </div> + </div> + <div id="site"> + <div id="content" class="max-width"> + + <article id="Snap"> + <header> + <h3 class="dr-method">Snap(…)<a href="#Snap" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 33 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L33">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a drawing surface or wraps existing SVG element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">width</span> + <span class="dr-type"><em class="dr-type-number">number</em> <em class="dr-type-string">string</em> </span> + <span class="dr-description">width of surface</span></li> + <li class="topcoat-list__item"><span class="dr-param">height</span> + <span class="dr-type"><em class="dr-type-number">number</em> <em class="dr-type-string">string</em> </span> + <span class="dr-description">height of surface</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">DOM</span> + <span class="dr-type"><em class="dr-type-SVGElement">SVGElement</em> </span> + <span class="dr-description">element to be wrapped into Snap structure</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">array</span> + <span class="dr-type"><em class="dr-type-array">array</em> </span> + <span class="dr-description">array of elements (will return set of elements)</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">query</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">CSS query selector</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.format"> + <header> + <h3 class="dr-method">Snap.format(token, json)<a href="#Snap.format" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 200 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L200">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.format-extra"></div> + <div class="dr-method"> + + + + + <p>Replaces construction of type <code>{<name>}</code> to the corresponding argument +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">token</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">string to format</span></li> + <li class="topcoat-list__item"><span class="dr-param">json</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">object which properties are used as a replacement</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">formatted string</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// this draws a rectangular shape equivalent to "M10,20h40v50h-40z" +paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z", { + x: 10, + y: 20, + dim: { + width: 40, + height: 50, + "negative width": -40 + } +}));</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Snap.rad"> + <header> + <h3 class="dr-method">Snap.rad(deg)<a href="#Snap.rad" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 290 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L290">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.rad-extra"></div> + <div class="dr-method"> + + + + + <p>Transform angle to radians +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">deg</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">angle in degrees</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">angle in radians</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.deg"> + <header> + <h3 class="dr-method">Snap.deg(rad)<a href="#Snap.deg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 299 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L299">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.deg-extra"></div> + <div class="dr-method"> + + + + + <p>Transform angle to degrees +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">rad</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">angle in radians</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">angle in degrees</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.sin"> + <header> + <h3 class="dr-method">Snap.sin(angle)<a href="#Snap.sin" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 308 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L308">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.sin-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent to <code>Math.sin()</code> only works with degrees, not radians. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">angle</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">angle in degrees</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">sin</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.tan"> + <header> + <h3 class="dr-method">Snap.tan(angle)<a href="#Snap.tan" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 319 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L319">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.tan-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent to <code>Math.tan()</code> only works with degrees, not radians. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">angle</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">angle in degrees</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">tan</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.cos"> + <header> + <h3 class="dr-method">Snap.cos(angle)<a href="#Snap.cos" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 330 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L330">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.cos-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent to <code>Math.cos()</code> only works with degrees, not radians. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">angle</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">angle in degrees</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">cos</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.asin"> + <header> + <h3 class="dr-method">Snap.asin(num)<a href="#Snap.asin" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 341 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L341">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.asin-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent to <code>Math.asin()</code> only works with degrees, not radians. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">num</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">value</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">asin in degrees</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.acos"> + <header> + <h3 class="dr-method">Snap.acos(num)<a href="#Snap.acos" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 352 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L352">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.acos-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent to <code>Math.acos()</code> only works with degrees, not radians. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">num</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">value</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">acos in degrees</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.atan"> + <header> + <h3 class="dr-method">Snap.atan(num)<a href="#Snap.atan" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 363 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L363">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.atan-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent to <code>Math.atan()</code> only works with degrees, not radians. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">num</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">value</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">atan in degrees</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.atan2"> + <header> + <h3 class="dr-method">Snap.atan2(num)<a href="#Snap.atan2" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 374 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L374">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.atan2-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent to <code>Math.atan2()</code> only works with degrees, not radians. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">num</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">value</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">atan2 in degrees</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.angle"> + <header> + <h3 class="dr-method">Snap.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Snap.angle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 391 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L391">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.angle-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an angle between two or three points +</p> + + + + + + + + + + + + + <h3>Parameters</h3> + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of first point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of first point</span></li> + <li class="topcoat-list__item"><span class="dr-param">x2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of second point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of second point</span></li> + <li class="topcoat-list__item"><span class="dr-param">x3</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of third point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y3</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of third point</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">angle in degrees</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.len"> + <header> + <h3 class="dr-method">Snap.len(x1, y1, x2, y2)<a href="#Snap.len" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 404 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L404">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.len-extra"></div> + <div class="dr-method"> + + + + + <p>Returns distance between two points +</p> + + + + + + + + + + + + + <h3>Parameters</h3> + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of first point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of first point</span></li> + <li class="topcoat-list__item"><span class="dr-param">x2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of second point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of second point</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">distance</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.len2"> + <header> + <h3 class="dr-method">Snap.len2(x1, y1, x2, y2)<a href="#Snap.len2" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 419 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L419">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.len2-extra"></div> + <div class="dr-method"> + + + + + <p>Returns squared distance between two points +</p> + + + + + + + + + + + + + <h3>Parameters</h3> + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of first point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of first point</span></li> + <li class="topcoat-list__item"><span class="dr-param">x2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of second point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of second point</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">distance</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.closestPoint"> + <header> + <h3 class="dr-method">Snap.closestPoint(path, x, y)<a href="#Snap.closestPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 439 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L439">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.closestPoint-extra"></div> + <div class="dr-method"> + + + + + <p>Returns closest point to a given one on a given path. +</p> + + + + + + + + + + + + + <h3>Parameters</h3> + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">path element</span></li> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coord of a point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coord of a point</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">in format</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.is"> + <header> + <h3 class="dr-method">Snap.is(o, type)<a href="#Snap.is" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 495 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L495">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.is-extra"></div> + <div class="dr-method"> + + + + + <p>Handy replacement for the <code>typeof</code> operator +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">o</span> + <span class="dr-type"><em class="dr-type-…">…</em> </span> + <span class="dr-description">any object or primitive</span></li> + <li class="topcoat-list__item"><span class="dr-param">type</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">name of the type, e.g., <code>string</code>, <code>function</code>, <code>number</code>, etc.</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-boolean">boolean</em> + + <span class="dr-description"><code>true</code> if given value is of given type</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.snapTo"> + <header> + <h3 class="dr-method">Snap.snapTo(values, value, [tolerance])<a href="#Snap.snapTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 506 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L506">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.snapTo-extra"></div> + <div class="dr-method"> + + + + + <p>Snaps given value to given grid +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">values</span> + <span class="dr-type"><em class="dr-type-array">array</em> <em class="dr-type-number">number</em> </span> + <span class="dr-description">given array of values or step of the grid</span></li> + <li class="topcoat-list__item"><span class="dr-param">value</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">value to adjust</span></li> + <li class="topcoat-list__item"><span class="dr-param">tolerance</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">maximum distance to the target value that would trigger the snap. Default is <code>10</code>.</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">adjusted value</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.getRGB"> + <header> + <h3 class="dr-method">Snap.getRGB(color)<a href="#Snap.getRGB" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 559 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L559">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.getRGB-extra"></div> + <div class="dr-method"> + + + + + <p>Parses color string as RGB object +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">color</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">color string in one of the following formats:</span></li> + + </ol> + </div> + + + + + + + + + + + <ul> + + + + + + + + + + + + <li>Color name (<code>red</code>, <code>green</code>, <code>cornflowerblue</code>, etc)</li> + + + + + + + + + + + + <li>#••• — shortened HTML color: (<code>#000</code>, <code>#fc0</code>, etc.)</li> + + + + + + + + + + + + <li>#•••••• — full length HTML color: (<code>#000000</code>, <code>#bd2300</code>)</li> + + + + + + + + + + + + <li>rgb(•••, •••, •••) — red, green and blue channels values: (<code>rgb(200, 100, 0)</code>)</li> + + + + + + + + + + + + <li>rgba(•••, •••, •••, •••) — also with opacity</li> + + + + + + + + + + + + <li>rgb(•••%, •••%, •••%) — same as above, but in %: (<code>rgb(100%, 175%, 0%)</code>)</li> + + + + + + + + + + + + <li>rgba(•••%, •••%, •••%, •••%) — also with opacity</li> + + + + + + + + + + + + <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (<code>hsb(0.5, 0.25, 1)</code>)</li> + + + + + + + + + + + + <li>hsba(•••, •••, •••, •••) — also with opacity</li> + + + + + + + + + + + + <li>hsb(•••%, •••%, •••%) — same as above, but in %</li> + + + + + + + + + + + + <li>hsba(•••%, •••%, •••%, •••%) — also with opacity</li> + + + + + + + + + + + + <li>hsl(•••, •••, •••) — hue, saturation and luminosity values: (<code>hsb(0.5, 0.25, 0.5)</code>)</li> + + + + + + + + + + + + <li>hsla(•••, •••, •••, •••) — also with opacity</li> + + + + + + + + + + + + <li>hsl(•••%, •••%, •••%) — same as above, but in %</li> + + + + + + + + + + + + <li>hsla(•••%, •••%, •••%, •••%) — also with opacity</li> + + + + + + + + + + + + </ul> + + + + + + + + + + <p>Note that <code>%</code> can be used any time: <code>rgb(20%, 255, 50%)</code>. +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">RGB object in the following format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">red,</span> + </li> + + + + <li> + <span class="dr-json-key">g</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">green,</span> + </li> + + + + <li> + <span class="dr-json-key">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">blue,</span> + </li> + + + + <li> + <span class="dr-json-key">hex</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">color in HTML/CSS format: #••••••,</span> + </li> + + + + <li> + <span class="dr-json-key">error</span> + <span class="dr-type"><em class="dr-type-boolean">boolean</em> </span> + <span class="dr-json-description">true if string can't be parsed</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.hsb"> + <header> + <h3 class="dr-method">Snap.hsb(h, s, b)<a href="#Snap.hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 647 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L647">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.hsb-extra"></div> + <div class="dr-method"> + + + + + <p>Converts HSB values to a hex representation of the color +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">h</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">hue</span></li> + <li class="topcoat-list__item"><span class="dr-param">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">saturation</span></li> + <li class="topcoat-list__item"><span class="dr-param">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">value or brightness</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">hex representation of the color</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.hsl"> + <header> + <h3 class="dr-method">Snap.hsl(h, s, l)<a href="#Snap.hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 660 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L660">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.hsl-extra"></div> + <div class="dr-method"> + + + + + <p>Converts HSL values to a hex representation of the color +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">h</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">hue</span></li> + <li class="topcoat-list__item"><span class="dr-param">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">saturation</span></li> + <li class="topcoat-list__item"><span class="dr-param">l</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">luminosity</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">hex representation of the color</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.rgb"> + <header> + <h3 class="dr-method">Snap.rgb(r, g, b)<a href="#Snap.rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 673 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L673">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.rgb-extra"></div> + <div class="dr-method"> + + + + + <p>Converts RGB values to a hex representation of the color +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">red</span></li> + <li class="topcoat-list__item"><span class="dr-param">g</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">green</span></li> + <li class="topcoat-list__item"><span class="dr-param">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">blue</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">hex representation of the color</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.color"> + <header> + <h3 class="dr-method">Snap.color(clr)<a href="#Snap.color" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 759 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L759">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.color-extra"></div> + <div class="dr-method"> + + + + + <p>Parses the color string and returns an object featuring the color's component values +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">clr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">color string in one of the supported formats (see <a href="#Snap.getRGB" class="dr-link">Snap.getRGB</a>)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">Combined RGB/HSB object in the following format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">red,</span> + </li> + + + + <li> + <span class="dr-json-key">g</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">green,</span> + </li> + + + + <li> + <span class="dr-json-key">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">blue,</span> + </li> + + + + <li> + <span class="dr-json-key">hex</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">color in HTML/CSS format: #••••••,</span> + </li> + + + + <li> + <span class="dr-json-key">error</span> + <span class="dr-type"><em class="dr-type-boolean">boolean</em> </span> + <span class="dr-json-description"><code>true</code> if string can't be parsed,</span> + </li> + + + + <li> + <span class="dr-json-key">h</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">hue,</span> + </li> + + + + <li> + <span class="dr-json-key">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">saturation,</span> + </li> + + + + <li> + <span class="dr-json-key">v</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">value (brightness),</span> + </li> + + + + <li> + <span class="dr-json-key">l</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">lightness</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.hsb2rgb"> + <header> + <h3 class="dr-method">Snap.hsb2rgb(h, s, v)<a href="#Snap.hsb2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 811 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L811">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.hsb2rgb-extra"></div> + <div class="dr-method"> + + + + + <p>Converts HSB values to an RGB object +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">h</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">hue</span></li> + <li class="topcoat-list__item"><span class="dr-param">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">saturation</span></li> + <li class="topcoat-list__item"><span class="dr-param">v</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">value or brightness</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">RGB object in the following format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">red,</span> + </li> + + + + <li> + <span class="dr-json-key">g</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">green,</span> + </li> + + + + <li> + <span class="dr-json-key">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">blue,</span> + </li> + + + + <li> + <span class="dr-json-key">hex</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">color in HTML/CSS format: #••••••</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.hsl2rgb"> + <header> + <h3 class="dr-method">Snap.hsl2rgb(h, s, l)<a href="#Snap.hsl2rgb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 847 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L847">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.hsl2rgb-extra"></div> + <div class="dr-method"> + + + + + <p>Converts HSL values to an RGB object +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">h</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">hue</span></li> + <li class="topcoat-list__item"><span class="dr-param">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">saturation</span></li> + <li class="topcoat-list__item"><span class="dr-param">l</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">luminosity</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">RGB object in the following format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">red,</span> + </li> + + + + <li> + <span class="dr-json-key">g</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">green,</span> + </li> + + + + <li> + <span class="dr-json-key">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">blue,</span> + </li> + + + + <li> + <span class="dr-json-key">hex</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">color in HTML/CSS format: #••••••</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.rgb2hsb"> + <header> + <h3 class="dr-method">Snap.rgb2hsb(r, g, b)<a href="#Snap.rgb2hsb" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 886 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L886">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.rgb2hsb-extra"></div> + <div class="dr-method"> + + + + + <p>Converts RGB values to an HSB object +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">red</span></li> + <li class="topcoat-list__item"><span class="dr-param">g</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">green</span></li> + <li class="topcoat-list__item"><span class="dr-param">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">blue</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">HSB object in the following format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">h</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">hue,</span> + </li> + + + + <li> + <span class="dr-json-key">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">saturation,</span> + </li> + + + + <li> + <span class="dr-json-key">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">brightness</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.rgb2hsl"> + <header> + <h3 class="dr-method">Snap.rgb2hsl(r, g, b)<a href="#Snap.rgb2hsl" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 919 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L919">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.rgb2hsl-extra"></div> + <div class="dr-method"> + + + + + <p>Converts RGB values to an HSL object +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">red</span></li> + <li class="topcoat-list__item"><span class="dr-param">g</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">green</span></li> + <li class="topcoat-list__item"><span class="dr-param">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">blue</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">HSL object in the following format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">h</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">hue,</span> + </li> + + + + <li> + <span class="dr-json-key">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">saturation,</span> + </li> + + + + <li> + <span class="dr-json-key">l</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">luminosity</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.parsePathString"> + <header> + <h3 class="dr-method">Snap.parsePathString(pathString)<a href="#Snap.parsePathString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 952 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L952">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.parsePathString-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Parses given path string into an array of arrays of path segments +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">pathString</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em> </span> + <span class="dr-description">path string or array of segments (in the last case it is returned straight away)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-array">array</em> + + <span class="dr-description">array of segments</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.parseTransformString"> + <header> + <h3 class="dr-method">Snap.parseTransformString(TString)<a href="#Snap.parseTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1005 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1005">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.parseTransformString-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Parses given transform string into an array of transformations +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">TString</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em> </span> + <span class="dr-description">transform string or array of transformations (in the last case it is returned straight away)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-array">array</em> + + <span class="dr-description">array of transformations</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.select"> + <header> + <h3 class="dr-method">Snap.select(query)<a href="#Snap.select" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1265 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1265">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.select-extra"></div> + <div class="dr-method"> + + + + + <p>Wraps a DOM element specified by CSS selector as <a href="#Element" class="dr-link">Element</a> +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">query</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">CSS selector of the element</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.selectAll"> + <header> + <h3 class="dr-method">Snap.selectAll(query)<a href="#Snap.selectAll" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1277 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1277">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.selectAll-extra"></div> + <div class="dr-method"> + + + + + <p>Wraps DOM elements specified by CSS selector as set or array of <a href="#Element" class="dr-link">Element</a> +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">query</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">CSS selector of the element</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.node"> + <header> + <h3 class="dr-property">Element.node()<a href="#Element.node" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1339 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1339">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.node-extra"></div> + <div class="dr-property"> + + + + + <p>Gives you a reference to the DOM object, so you can assign event handlers or just mess around. +</p> + + + + + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// draw a circle at coordinate 10,10 with radius of 10 +var c = paper.circle(10, 10, 10); +c.node.onclick = function () { + c.attr("fill", "red"); +};</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Element.type"> + <header> + <h3 class="dr-property">Element.type()<a href="#Element.type" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1349 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1349">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.type-extra"></div> + <div class="dr-property"> + + + + + <p>SVG tag name of the given element. +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Element.attr"> + <header> + <h3 class="dr-method">Element.attr(…)<a href="#Element.attr" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1391 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1391">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.attr-extra"></div> + <div class="dr-method"> + + + + + <p>Gets or sets given attributes of the element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">params</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">contains key-value pairs of attributes you want to set</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">param</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">name of the attribute</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + + <p>or +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">value of attribute</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">el.attr({ + fill: "#fc0", + stroke: "#000", + strokeWidth: 2, // CamelCase... + "fill-opacity": 0.5, // or dash-separated names + width: "*=2" // prefixed values +}); +console.log(el.attr("fill")); // #fc0</code></pre></section> + + + + + + + <p>Prefixed values in format <code>"+=10"</code> supported. All four operations +(<code>+</code>, <code>-</code>, <code>*</code> and <code>/</code>) could be used. Optionally you can use units for <code>+</code> +and <code>-</code>: <code>"+=2em"</code>. +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Snap.parse"> + <header> + <h3 class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1432 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1432">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.parse-extra"></div> + <div class="dr-method"> + + + + + <p>Parses SVG fragment and converts it into a <a href="#Fragment" class="dr-link">Fragment</a> +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">svg</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">SVG string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Fragment">Fragment</em> + + <span class="dr-description">the <a href="#Fragment" class="dr-link">Fragment</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.fragment"> + <header> + <h3 class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1466 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1466">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.fragment-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a DOM fragment from a given list of elements or strings +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">varargs</span> + <span class="dr-type"><em class="dr-type-…">…</em> </span> + <span class="dr-description">SVG string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Fragment">Fragment</em> + + <span class="dr-description">the <a href="#Fragment" class="dr-link">Fragment</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.el"> + <header> + <h3 class="dr-method">Paper.el(name, attr)<a href="#Paper.el" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1569 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1569">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.el-extra"></div> + <div class="dr-method"> + + + + + <p>Creates an element on paper with a given name and no attributes +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">name</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">tag name</span></li> + <li class="topcoat-list__item"><span class="dr-param">attr</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">attributes</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(10, 10, 10); // is the same as... +var c = paper.el("circle").attr({ + cx: 10, + cy: 10, + r: 10 +}); +// and the same as +var c = paper.el("circle", { + cx: 10, + cy: 10, + r: 10 +});</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Element.children"> + <header> + <h3 class="dr-method">Element.children()<a href="#Element.children" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1581 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1581">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.children-extra"></div> + <div class="dr-method"> + + + + + <p>Returns array of all the children of the element. +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-array">array</em> + + <span class="dr-description">array of Elements</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.toJSON"> + <header> + <h3 class="dr-method">Element.toJSON()<a href="#Element.toJSON" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1614 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1614">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.toJSON-extra"></div> + <div class="dr-method"> + + + + + <p>Returns object representation of the given element and all its children. +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">in format</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">type</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">this.type,</span> + </li> + + + + <li> + <span class="dr-json-key">attr</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-json-description">attributes map,</span> + </li> + + + + <li> + <span class="dr-json-key">childNodes</span> + <span class="dr-type"><em class="dr-type-array">array</em> </span> + <span class="dr-json-description">optional array of children in the same format</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.ajax"> + <header> + <h3 class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1732 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1732">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.ajax-extra"></div> + <div class="dr-method"> + + + + + <p>Simple implementation of Ajax +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">url</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">URL</span></li> + <li class="topcoat-list__item"><span class="dr-param">postData</span> + <span class="dr-type"><em class="dr-type-object">object</em> <em class="dr-type-string">string</em> </span> + <span class="dr-description">data for post request</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">callback</span></li> + <li class="topcoat-list__item"><span class="dr-param">scope</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">scope of callback</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">url</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">URL</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">callback</span></li> + <li class="topcoat-list__item"><span class="dr-param">scope</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">scope of callback</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-XMLHttpRequest">XMLHttpRequest</em> + + <span class="dr-description">the XMLHttpRequest object, just in case</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.load"> + <header> + <h3 class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1778 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1778">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.load-extra"></div> + <div class="dr-method"> + + + + + <p>Loads external SVG file as a <a href="#Fragment" class="dr-link">Fragment</a> (see <a href="#Snap.ajax" class="dr-link">Snap.ajax</a> for more advanced AJAX) +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">url</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">URL</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">callback</span></li> + <li class="topcoat-list__item"><span class="dr-param">scope</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">scope of callback</span></li> + + </ol> + </div> + + + + + + + + </div> + </section> + </article> + + <article id="Snap.getElementByPoint"> + <header> + <h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1809 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1809">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.getElementByPoint-extra"></div> + <div class="dr-method"> + + + + + <p>Returns you topmost element under given point. +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">Snap element object</span> + </p> + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coordinate from the top left corner of the window</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coordinate from the top left corner of the window</span></li> + + </ol> + </div> + + + + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">Snap.getElementByPoint(mouseX, mouseY).attr({stroke: "#f00"});</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Snap.plugin"> + <header> + <h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1844 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1844">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.plugin-extra"></div> + <div class="dr-method"> + + + + + <p>Let you write plugins. You pass in a function with five arguments, like this: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">Snap.plugin(function (Snap, Element, Paper, global, Fragment) { + Snap.newmethod = function () {}; + Element.prototype.newmethod = function () {}; + Paper.prototype.newmethod = function () {}; +});</code></pre></section> + + + + + + + <p>Inside the function you have access to all main objects (and their +prototypes). This allow you to extend anything you want. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">f</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">your plugin body</span></li> + + </ol> + </div> + + + + + + + + </div> + </section> + </article> + + <article id="Element.getBBox"> + <header> + <h3 class="dr-method">Element.getBBox()<a href="#Element.getBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 49 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L49">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.getBBox-extra"></div> + <div class="dr-method"> + + + + + <p>Returns the bounding box descriptor for the given element +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">bounding box descriptor:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">cx:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x of the center,</span> + </li> + + + + <li> + <span class="dr-json-key">cy:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x of the center,</span> + </li> + + + + <li> + <span class="dr-json-key">h:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">height,</span> + </li> + + + + <li> + <span class="dr-json-key">height:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">height,</span> + </li> + + + + <li> + <span class="dr-json-key">path:</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">path command for the box,</span> + </li> + + + + <li> + <span class="dr-json-key">r0:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">radius of a circle that fully encloses the box,</span> + </li> + + + + <li> + <span class="dr-json-key">r1:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">radius of the smallest circle that can be enclosed,</span> + </li> + + + + <li> + <span class="dr-json-key">r2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">radius of the largest circle that can be enclosed,</span> + </li> + + + + <li> + <span class="dr-json-key">vb:</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">box as a viewbox command,</span> + </li> + + + + <li> + <span class="dr-json-key">w:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">width,</span> + </li> + + + + <li> + <span class="dr-json-key">width:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">width,</span> + </li> + + + + <li> + <span class="dr-json-key">x2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x of the right side,</span> + </li> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x of the left side,</span> + </li> + + + + <li> + <span class="dr-json-key">y2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y of the bottom edge,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y of the top edge</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Element.transform"> + <header> + <h3 class="dr-method">Element.transform(tstr)<a href="#Element.transform" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 141 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L141">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.transform-extra"></div> + <div class="dr-method"> + + + + + <p>Gets or sets transformation of the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">tstr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">transform string in Snap or SVG format</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + + <p>or +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">transformation descriptor:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">string</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">transform string,</span> + </li> + + + + <li> + <span class="dr-json-key">globalMatrix</span> + <span class="dr-type"><em class="dr-type-Matrix">Matrix</em> </span> + <span class="dr-json-description">matrix of all transformations applied to element or its parents,</span> + </li> + + + + <li> + <span class="dr-json-key">localMatrix</span> + <span class="dr-type"><em class="dr-type-Matrix">Matrix</em> </span> + <span class="dr-json-description">matrix of transformations applied only to the element,</span> + </li> + + + + <li> + <span class="dr-json-key">diffMatrix</span> + <span class="dr-type"><em class="dr-type-Matrix">Matrix</em> </span> + <span class="dr-json-description">matrix of difference between global and local transformations,</span> + </li> + + + + <li> + <span class="dr-json-key">global</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">global transformation as string,</span> + </li> + + + + <li> + <span class="dr-json-key">local</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">local transformation as string,</span> + </li> + + + + <li> + <span class="dr-json-key">toString</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">returns <code>string</code> property</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Element.parent"> + <header> + <h3 class="dr-method">Element.parent()<a href="#Element.parent" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 199 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L199">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.parent-extra"></div> + <div class="dr-method"> + + + + + <p>Returns the element's parent +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the parent element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.append"> + <header> + <h3 class="dr-method">Element.append(el)<a href="#Element.append" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 211 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L211">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.append-extra"></div> + <div class="dr-method"> + + + + + <p>Appends the given element to current one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> <em class="dr-type-Set">Set</em> </span> + <span class="dr-description">element to append</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the parent element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.add"> + <header> + <h3 class="dr-method">Element.add()<a href="#Element.add" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 217 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L217">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.add-extra"></div> + <div class="dr-method"> + + + + + <p>See <a href="#Element.append" class="dr-link">Element.append</a> +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Element.appendTo"> + <header> + <h3 class="dr-method">Element.appendTo(el)<a href="#Element.appendTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 241 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L241">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.appendTo-extra"></div> + <div class="dr-method"> + + + + + <p>Appends the current element to the given one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">parent element to append to</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the child element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.prepend"> + <header> + <h3 class="dr-method">Element.prepend(el)<a href="#Element.prepend" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 257 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L257">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.prepend-extra"></div> + <div class="dr-method"> + + + + + <p>Prepends the given element to the current one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">element to prepend</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the parent element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.prependTo"> + <header> + <h3 class="dr-method">Element.prependTo(el)<a href="#Element.prependTo" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 291 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L291">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.prependTo-extra"></div> + <div class="dr-method"> + + + + + <p>Prepends the current element to the given one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">parent element to prepend to</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the child element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.before"> + <header> + <h3 class="dr-method">Element.before(el)<a href="#Element.before" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 305 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L305">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.before-extra"></div> + <div class="dr-method"> + + + + + <p>Inserts given element before the current one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">element to insert</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the parent element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.after"> + <header> + <h3 class="dr-method">Element.after(el)<a href="#Element.after" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 333 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L333">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.after-extra"></div> + <div class="dr-method"> + + + + + <p>Inserts given element after the current one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">element to insert</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the parent element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.insertBefore"> + <header> + <h3 class="dr-method">Element.insertBefore(el)<a href="#Element.insertBefore" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 355 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L355">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.insertBefore-extra"></div> + <div class="dr-method"> + + + + + <p>Inserts the element after the given one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">element next to whom insert to</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the parent element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.insertAfter"> + <header> + <h3 class="dr-method">Element.insertAfter(el)<a href="#Element.insertAfter" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 373 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L373">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.insertAfter-extra"></div> + <div class="dr-method"> + + + + + <p>Inserts the element after the given one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">el</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">element next to whom insert to</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the parent element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.remove"> + <header> + <h3 class="dr-method">Element.remove()<a href="#Element.remove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 389 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L389">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.remove-extra"></div> + <div class="dr-method"> + + + + + <p>Removes element from the DOM +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the detached element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.select"> + <header> + <h3 class="dr-method">Element.select(query)<a href="#Element.select" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 406 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L406">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.select-extra"></div> + <div class="dr-method"> + + + + + <p>Gathers the nested <a href="#Element" class="dr-link">Element</a> matching the given set of CSS selectors +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">query</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">CSS selector</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">result of query selection</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.selectAll"> + <header> + <h3 class="dr-method">Element.selectAll(query)<a href="#Element.selectAll" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 418 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L418">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.selectAll-extra"></div> + <div class="dr-method"> + + + + + <p>Gathers nested <a href="#Element" class="dr-link">Element</a> objects matching the given set of CSS selectors +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">query</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">CSS selector</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Set">Set</em> + + <em class="dr-type-array">array</em> + + <span class="dr-description">result of query selection</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.asPX"> + <header> + <h3 class="dr-method">Element.asPX(attr, [value])<a href="#Element.asPX" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 436 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L436">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.asPX-extra"></div> + <div class="dr-method"> + + + + + <p>Returns given attribute of the element as a <code>px</code> value (not %, em, etc.) +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">attr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">attribute name</span></li> + <li class="topcoat-list__item"><span class="dr-param">value</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">attribute value</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">result of query selection</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.use"> + <header> + <h3 class="dr-method">Element.use()<a href="#Element.use" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 451 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L451">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.use-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a <code><use></code> element linked to the current element +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the <code><use></code> element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.clone"> + <header> + <h3 class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 542 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L542">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.clone-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a clone of the element and inserts it after the element +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the clone</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.toDefs"> + <header> + <h3 class="dr-method">Element.toDefs()<a href="#Element.toDefs" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 559 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L559">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.toDefs-extra"></div> + <div class="dr-method"> + + + + + <p>Moves element to the shared <code><defs></code> area +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.toPattern"> + <header> + <h3 class="dr-method">Element.toPattern(x, y, width, height)<a href="#Element.toPattern" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 587 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L587">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.toPattern-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a <code><pattern></code> element from the current element +To create a pattern you have to specify the pattern rect: +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">width</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">height</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the <code><pattern></code> element</span> + </p> + + + + + + <p>You can use pattern later on as an argument for <code>fill</code> attribute: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({ + fill: "none", + stroke: "#bada55", + strokeWidth: 5 + }).pattern(0, 0, 10, 10), + c = paper.circle(200, 200, 100); +c.attr({ + fill: p +});</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Element.marker"> + <header> + <h3 class="dr-method">Element.marker(x, y, width, height, refX, refY)<a href="#Element.marker" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 628 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L628">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.marker-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a <code><marker></code> element from the current element +To create a marker you have to specify the bounding rect and reference point: +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">width</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">height</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">refX</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">refY</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the <code><marker></code> element</span> + </p> + + + + + + <p>You can specify the marker later as an argument for <code>marker-start</code>, <code>marker-end</code>, <code>marker-mid</code>, and <code>marker</code> attributes. The <code>marker</code> attribute places the marker at every point along the path, and <code>marker-mid</code> places them at every point except the start and end. +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Snap.animation"> + <header> + <h3 class="dr-method">Snap.animation(attr, duration, [easing], [callback])<a href="#Snap.animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 687 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L687">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.animation-extra"></div> + <div class="dr-method"> + + + + + <p>Creates an animation object +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">attr</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">attributes of final destination</span></li> + <li class="topcoat-list__item"><span class="dr-param">duration</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">duration of the animation, in milliseconds</span></li> + <li class="topcoat-list__item"><span class="dr-param">easing</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">one of easing functions of <a href="#mina" class="dr-link">mina</a> or custom one</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">callback function that fires when animation ends</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">animation object</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.inAnim"> + <header> + <h3 class="dr-method">Element.inAnim()<a href="#Element.inAnim" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 705 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L705">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.inAnim-extra"></div> + <div class="dr-method"> + + + + + <p>Returns a set of animations that may be able to manipulate the current element +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">in format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">anim</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-json-description">animation object,</span> + </li> + + + + <li> + <span class="dr-json-key">mina</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-json-description"><a href="#mina" class="dr-link">mina</a> object,</span> + </li> + + + + <li> + <span class="dr-json-key">curStatus</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">0..1 — status of the animation: 0 — just started, 1 — just finished,</span> + </li> + + + + <li> + <span class="dr-json-key">status</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">gets or sets the status of the animation,</span> + </li> + + + + <li> + <span class="dr-json-key">stop</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">stops the animation</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.animate"> + <header> + <h3 class="dr-method">Snap.animate(from, to, setter, duration, [easing], [callback])<a href="#Snap.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 755 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L755">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.animate-extra"></div> + <div class="dr-method"> + + + + + <p>Runs generic animation of one number into another with a caring function +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">from</span> + <span class="dr-type"><em class="dr-type-number">number</em> <em class="dr-type-array">array</em> </span> + <span class="dr-description">number or array of numbers</span></li> + <li class="topcoat-list__item"><span class="dr-param">to</span> + <span class="dr-type"><em class="dr-type-number">number</em> <em class="dr-type-array">array</em> </span> + <span class="dr-description">number or array of numbers</span></li> + <li class="topcoat-list__item"><span class="dr-param">setter</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">caring function that accepts one number argument</span></li> + <li class="topcoat-list__item"><span class="dr-param">duration</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">duration, in milliseconds</span></li> + <li class="topcoat-list__item"><span class="dr-param">easing</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">easing function from <a href="#mina" class="dr-link">mina</a> or custom</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">callback function to execute when animation ends</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">animation object in <a href="#mina" class="dr-link">mina</a> format</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">id</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">animation id, consider it read-only,</span> + </li> + + + + <li> + <span class="dr-json-key">duration</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">gets or sets the duration of the animation,</span> + </li> + + + + <li> + <span class="dr-json-key">easing</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">easing,</span> + </li> + + + + <li> + <span class="dr-json-key">speed</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">gets or sets the speed of the animation,</span> + </li> + + + + <li> + <span class="dr-json-key">status</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">gets or sets the status of the animation,</span> + </li> + + + + <li> + <span class="dr-json-key">stop</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">stops the animation</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var rect = Snap().rect(0, 0, 10, 10); +Snap.animate(0, 10, function (val) { + rect.attr({ + x: val + }); +}, 1000); +// in given context is equivalent to +rect.animate({x: 10}, 1000);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Element.stop"> + <header> + <h3 class="dr-method">Element.stop()<a href="#Element.stop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 773 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L773">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.stop-extra"></div> + <div class="dr-method"> + + + + + <p>Stops all the animations for the current element +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.animate"> + <header> + <h3 class="dr-method">Element.animate(attrs, duration, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 792 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L792">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.animate-extra"></div> + <div class="dr-method"> + + + + + <p>Animates the given attributes of the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">attrs</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">key-value pairs of destination attributes</span></li> + <li class="topcoat-list__item"><span class="dr-param">duration</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">duration of the animation in milliseconds</span></li> + <li class="topcoat-list__item"><span class="dr-param">easing</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">easing function from <a href="#mina" class="dr-link">mina</a> or custom</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">callback function that executes when the animation ends</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.data"> + <header> + <h3 class="dr-method">Element.data(key, [value])<a href="#Element.data" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 865 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L865">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.data-extra"></div> + <div class="dr-method"> + + + + + <p>Adds or retrieves given value associated with given key. (Don’t confuse +with <code>data-</code> attributes) +</p><p>See also <a href="#Element.removeData" class="dr-link">Element.removeData</a> +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">key</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">key to store data</span></li> + <li class="topcoat-list__item"><span class="dr-param">value</span> + <span class="dr-type"><em class="dr-type-any">any</em> </span> + <span class="dr-description">value to store</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + + <p>or, if value is not specified: +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-any">any</em> + + <span class="dr-description">value</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">for (var i = 0, i < 5, i++) { + paper.circle(10 + 15 * i, 10, 10) + .attr({fill: "#000"}) + .data("i", i) + .click(function () { + alert(this.data("i")); + }); +}</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Element.removeData"> + <header> + <h3 class="dr-method">Element.removeData([key])<a href="#Element.removeData" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 894 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L894">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.removeData-extra"></div> + <div class="dr-method"> + + + + + <p>Removes value associated with an element by given key. +If key is not provided, removes all the data of the element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">key</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">key</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.outerSVG"> + <header> + <h3 class="dr-method">Element.outerSVG()<a href="#Element.outerSVG" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 911 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L911">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.outerSVG-extra"></div> + <div class="dr-method"> + + + + + <p>Returns SVG code for the element, equivalent to HTML's <code>outerHTML</code>. +</p><p>See also <a href="#Element.innerSVG" class="dr-link">Element.innerSVG</a> +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">SVG code for the element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.toString"> + <header> + <h3 class="dr-method">Element.toString()<a href="#Element.toString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 917 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L917">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.toString-extra"></div> + <div class="dr-method"> + + + + + <p>See <a href="#Element.outerSVG" class="dr-link">Element.outerSVG</a> +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Element.innerSVG"> + <header> + <h3 class="dr-method">Element.innerSVG()<a href="#Element.innerSVG" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 925 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L925">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.innerSVG-extra"></div> + <div class="dr-method"> + + + + + <p>Returns SVG code for the element's contents, equivalent to HTML's <code>innerHTML</code> +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">SVG code for the element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Fragment.select"> + <header> + <h3 class="dr-method">Fragment.select()<a href="#Fragment.select" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 972 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L972">➭</a></h3> + </header> + <section> + <div class="extra" id="Fragment.select-extra"></div> + <div class="dr-method"> + + + + + <p>See <a href="#Element.select" class="dr-link">Element.select</a> +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Fragment.selectAll"> + <header> + <h3 class="dr-method">Fragment.selectAll()<a href="#Fragment.selectAll" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 979 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L979">➭</a></h3> + </header> + <section> + <div class="extra" id="Fragment.selectAll-extra"></div> + <div class="dr-method"> + + + + + <p>See <a href="#Element.selectAll" class="dr-link">Element.selectAll</a> +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Matrix.add"> + <header> + <h3 class="dr-method">Matrix.add(…)<a href="#Matrix.add" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 60 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L60">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.add-extra"></div> + <div class="dr-method"> + + + + + <p>Adds the given matrix to existing one +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">a</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">c</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">d</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">e</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">f</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">matrix</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></li> + + </ol> + </div> + + + + + + + + </div> + </section> + </article> + + <article id="Matrix.invert"> + <header> + <h3 class="dr-method">Matrix.invert()<a href="#Matrix.invert" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 94 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L94">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.invert-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an inverted version of the matrix +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Matrix.clone"> + <header> + <h3 class="dr-method">Matrix.clone()<a href="#Matrix.clone" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 106 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L106">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.clone-extra"></div> + <div class="dr-method"> + + + + + <p>Returns a copy of the matrix +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Matrix.translate"> + <header> + <h3 class="dr-method">Matrix.translate(x, y)<a href="#Matrix.translate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 117 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L117">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.translate-extra"></div> + <div class="dr-method"> + + + + + <p>Translate the matrix +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal offset distance</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical offset distance</span></li> + + </ol> + </div> + + + + + + + + </div> + </section> + </article> + + <article id="Matrix.scale"> + <header> + <h3 class="dr-method">Matrix.scale(x, [y], [cx], [cy])<a href="#Matrix.scale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 131 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L131">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.scale-extra"></div> + <div class="dr-method"> + + + + + <p>Scales the matrix +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount to be scaled, with <code>1</code> resulting in no change</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount to scale along the vertical axis. (Otherwise <code>x</code> applies to both axes.)</span></li> + <li class="topcoat-list__item"><span class="dr-param">cx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal origin point from which to scale</span></li> + <li class="topcoat-list__item"><span class="dr-param">cy</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical origin point from which to scale</span></li> + + </ol> + </div> + + + + + + + + + <p>Default cx, cy is the middle point of the element. +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Matrix.rotate"> + <header> + <h3 class="dr-method">Matrix.rotate(a, x, y)<a href="#Matrix.rotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 147 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L147">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.rotate-extra"></div> + <div class="dr-method"> + + + + + <p>Rotates the matrix +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">a</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">angle of rotation, in degrees</span></li> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal origin point from which to rotate</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical origin point from which to rotate</span></li> + + </ol> + </div> + + + + + + + + </div> + </section> + </article> + + <article id="Matrix.x"> + <header> + <h3 class="dr-method">Matrix.x(x, y)<a href="#Matrix.x" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 165 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L165">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.x-extra"></div> + <div class="dr-method"> + + + + + <p>Returns x coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.y" class="dr-link">Matrix.y</a> +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">x</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Matrix.y"> + <header> + <h3 class="dr-method">Matrix.y(x, y)<a href="#Matrix.y" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 177 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L177">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.y-extra"></div> + <div class="dr-method"> + + + + + <p>Returns y coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.x" class="dr-link">Matrix.x</a> +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">y</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Matrix.determinant"> + <header> + <h3 class="dr-method">Matrix.determinant()<a href="#Matrix.determinant" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 204 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L204">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.determinant-extra"></div> + <div class="dr-method"> + + + + + <p>Finds determinant of the given matrix. +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">determinant</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Matrix.split"> + <header> + <h3 class="dr-method">Matrix.split()<a href="#Matrix.split" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 221 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L221">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.split-extra"></div> + <div class="dr-method"> + + + + + <p>Splits matrix into primitive transformations +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">in format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li> + <span class="dr-json-key">dx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">translation by x</span> + </li> + + + + <li> + <span class="dr-json-key">dy</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">translation by y</span> + </li> + + + + <li> + <span class="dr-json-key">scalex</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">scale by x</span> + </li> + + + + <li> + <span class="dr-json-key">scaley</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">scale by y</span> + </li> + + + + <li> + <span class="dr-json-key">shear</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">shear</span> + </li> + + + + <li> + <span class="dr-json-key">rotate</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">rotation in deg</span> + </li> + + + + <li> + <span class="dr-json-key">isSimple</span> + <span class="dr-type"><em class="dr-type-boolean">boolean</em> </span> + <span class="dr-json-description">could it be represented via simple transformations</span> + </li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Matrix.toTransformString"> + <header> + <h3 class="dr-method">Matrix.toTransformString()<a href="#Matrix.toTransformString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 267 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L267">➭</a></h3> + </header> + <section> + <div class="extra" id="Matrix.toTransformString-extra"></div> + <div class="dr-method"> + + + + + <p>Returns transform string that represents given matrix +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">transform string</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.Matrix"> + <header> + <h3 class="dr-method">Snap.Matrix()<a href="#Snap.Matrix" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 288 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L288">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.Matrix-extra"></div> + <div class="dr-method"> + + + + + <p>Matrix constructor, extend on your own risk. +To create matrices use <a href="#Snap.matrix" class="dr-link">Snap.matrix</a>. +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Snap.matrix"> + <header> + <h3 class="dr-method">Snap.matrix(…)<a href="#Snap.matrix" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 306 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L306">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.matrix-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Returns a matrix based on the given parameters +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">a</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">c</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">d</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">e</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + <li class="topcoat-list__item"><span class="dr-param">f</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"></span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">svgMatrix</span> + <span class="dr-type"><em class="dr-type-SVGMatrix">SVGMatrix</em> </span> + <span class="dr-description"></span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.rect"> + <header> + <h3 class="dr-method">Paper.rect(x, y, width, height, [rx], [ry])<a href="#Paper.rect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 37 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L37">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.rect-extra"></div> + <div class="dr-method"> + + + + + <p></p><p>Draws a rectangle +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coordinate of the top left corner</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coordinate of the top left corner</span></li> + <li class="topcoat-list__item"><span class="dr-param">width</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">width</span></li> + <li class="topcoat-list__item"><span class="dr-param">height</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">height</span></li> + <li class="topcoat-list__item"><span class="dr-param">rx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal radius for rounded corners, default is 0</span></li> + <li class="topcoat-list__item"><span class="dr-param">ry</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical radius for rounded corners, default is rx or 0</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>rect</code> element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// regular rectangle +var c = paper.rect(10, 10, 50, 50); +// rectangle with rounded corners +var c = paper.rect(40, 40, 50, 50, 10);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.circle"> + <header> + <h3 class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 72 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L72">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.circle-extra"></div> + <div class="dr-method"> + + + + + <p>Draws a circle +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coordinate of the centre</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coordinate of the centre</span></li> + <li class="topcoat-list__item"><span class="dr-param">r</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">radius</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>circle</code> element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(50, 50, 40);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.image"> + <header> + <h3 class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 123 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L123">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.image-extra"></div> + <div class="dr-method"> + + + + + <p>Places an image on the surface +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">src</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">URI of the source image</span></li> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x offset position</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y offset position</span></li> + <li class="topcoat-list__item"><span class="dr-param">width</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">width of the image</span></li> + <li class="topcoat-list__item"><span class="dr-param">height</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">height of the image</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>image</code> element</span> + </p> + + + + + + <p>or +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">Snap element object with type <code>image</code></span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.image("apple.png", 10, 10, 80, 80);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.ellipse"> + <header> + <h3 class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 166 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L166">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.ellipse-extra"></div> + <div class="dr-method"> + + + + + <p>Draws an ellipse +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coordinate of the centre</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coordinate of the centre</span></li> + <li class="topcoat-list__item"><span class="dr-param">rx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal radius</span></li> + <li class="topcoat-list__item"><span class="dr-param">ry</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical radius</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>ellipse</code> element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.ellipse(50, 50, 40, 20);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.path"> + <header> + <h3 class="dr-method">Paper.path([pathString])<a href="#Paper.path" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 211 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L211">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.path-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a <code><path></code> element using the given string as the path's definition +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">pathString</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string in SVG format</span></li> + + </ol> + </div> + + + + + + + + + <p>Path string consists of one-letter commands, followed by comma seprarated arguments in numerical form. Example: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">"M10,20L30,40"</code></pre></section> + + + + + + + <p>This example features two commands: <code>M</code>, with arguments <code>(10, 20)</code> and <code>L</code> with arguments <code>(30, 40)</code>. Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates. +</p><p></p> + + + + + + + + + + + + <p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a> or <a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">article about path strings at MDN</a>.</p> + + + + + + + + + + + + <table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody> + + + + + + + + + + + + <tr><td>M</td><td>moveto</td><td>(x y)+</td></tr> + + + + + + + + + + + + <tr><td>Z</td><td>closepath</td><td>(none)</td></tr> + + + + + + + + + + + + <tr><td>L</td><td>lineto</td><td>(x y)+</td></tr> + + + + + + + + + + + + <tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr> + + + + + + + + + + + + <tr><td>V</td><td>vertical lineto</td><td>y+</td></tr> + + + + + + + + + + + + <tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr> + + + + + + + + + + + + <tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr> + + + + + + + + + + + + <tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr> + + + + + + + + + + + + <tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr> + + + + + + + + + + + + <tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr> + + + + + + + + + + + + <tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table> + + + + + + + + + + <p><li><em>Catmull-Rom curveto</em> is a not standard SVG command and added to make life easier.</li> +Note: there is a special case when a path consists of only three commands: <code>M10,10R…z</code>. In this case the path connects back to its starting point. +</p> + + + + + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.path("M10 10L90 90"); +// draw a diagonal line: +// move to 10,10, line to 90,90</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.g"> + <header> + <h3 class="dr-method">Paper.g([varargs])<a href="#Paper.g" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 239 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L239">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.g-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a group element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">varargs</span> + <span class="dr-type"><em class="dr-type-…">…</em> </span> + <span class="dr-description">elements to nest within the group</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>g</code> element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c1 = paper.circle(), + c2 = paper.rect(), + g = paper.g(c2, c1); // note that the order of elements is different</code></pre></section> + + + + + + + <p>or +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c1 = paper.circle(), + c2 = paper.rect(), + g = paper.g(); +g.add(c2, c1);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.group"> + <header> + <h3 class="dr-method">Paper.group()<a href="#Paper.group" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 245 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L245">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.group-extra"></div> + <div class="dr-method"> + + + + + <p>See <a href="#Paper.g" class="dr-link">Paper.g</a> +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Paper.svg"> + <header> + <h3 class="dr-method">Paper.svg(x, y, width, height, vbx, vby, vbw, vbh)<a href="#Paper.svg" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 272 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L272">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.svg-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a nested SVG element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> X of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> Y of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">width</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> width of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">height</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> height of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox X</span></li> + <li class="topcoat-list__item"><span class="dr-param">vby</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox Y</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbw</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox width</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbh</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox height</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>svg</code> element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.mask"> + <header> + <h3 class="dr-method">Paper.mask()<a href="#Paper.mask" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 304 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L304">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.mask-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent in behaviour to <a href="#Paper.g" class="dr-link">Paper.g</a>, except it’s a mask. +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>mask</code> element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.ptrn"> + <header> + <h3 class="dr-method">Paper.ptrn(x, y, width, height, vbx, vby, vbw, vbh)<a href="#Paper.ptrn" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 331 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L331">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.ptrn-extra"></div> + <div class="dr-method"> + + + + + <p>Equivalent in behaviour to <a href="#Paper.g" class="dr-link">Paper.g</a>, except it’s a pattern. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> X of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> Y of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">width</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> width of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">height</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> height of the element</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox X</span></li> + <li class="topcoat-list__item"><span class="dr-param">vby</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox Y</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbw</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox width</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbh</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox height</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>pattern</code> element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.use"> + <header> + <h3 class="dr-method">Paper.use(…)<a href="#Paper.use" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 368 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L368">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.use-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a <use> element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">id</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> id of element to link</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">id</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> element to link</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>use</code> element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.symbol"> + <header> + <h3 class="dr-method">Paper.symbol(vbx, vby, vbw, vbh)<a href="#Paper.symbol" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 396 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L396">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.symbol-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a <symbol> element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">vbx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox X</span></li> + <li class="topcoat-list__item"><span class="dr-param">vby</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox Y</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbw</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox width</span></li> + <li class="topcoat-list__item"><span class="dr-param">vbh</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox height</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>symbol</code> element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.text"> + <header> + <h3 class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 424 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L424">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.text-extra"></div> + <div class="dr-method"> + + + + + <p>Draws a text string +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coordinate position</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coordinate position</span></li> + <li class="topcoat-list__item"><span class="dr-param">text</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em> </span> + <span class="dr-description">The text string to draw or array of strings to nest within separate <code><tspan></code> elements</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>text</code> element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.text(50, 50, "Snap"); +var t2 = paper.text(50, 50, ["S","n","a","p"]); +// Text path usage +t1.attr({textpath: "M10,10L100,100"}); +// or +var pth = paper.path("M10,10L100,100"); +t1.attr({textpath: pth});</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.line"> + <header> + <h3 class="dr-method">Paper.line(x1, y1, x2, y2)<a href="#Paper.line" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 452 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L452">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.line-extra"></div> + <div class="dr-method"> + + + + + <p>Draws a line +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coordinate position of the start</span></li> + <li class="topcoat-list__item"><span class="dr-param">y1</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coordinate position of the start</span></li> + <li class="topcoat-list__item"><span class="dr-param">x2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x coordinate position of the end</span></li> + <li class="topcoat-list__item"><span class="dr-param">y2</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y coordinate position of the end</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>line</code> element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.line(50, 50, 100, 100);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.polyline"> + <header> + <h3 class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 481 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L481">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.polyline-extra"></div> + <div class="dr-method"> + + + + + <p>Draws a polyline +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">points</span> + <span class="dr-type"><em class="dr-type-array">array</em> </span> + <span class="dr-description">array of points</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">varargs</span> + <span class="dr-type"><em class="dr-type-…">…</em> </span> + <span class="dr-description">points</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>polyline</code> element</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var p1 = paper.polyline([10, 10, 100, 100]); +var p2 = paper.polyline(10, 10, 100, 100);</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Paper.polygon"> + <header> + <h3 class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 499 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L499">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.polygon-extra"></div> + <div class="dr-method"> + + + + + <p>Draws a polygon. See <a href="#Paper.polyline" class="dr-link">Paper.polyline</a> +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Paper.gradient"> + <header> + <h3 class="dr-method">Paper.gradient(gradient)<a href="#Paper.gradient" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 659 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L659">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.gradient-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a gradient element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">gradient</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">gradient descriptor</span></li> + + </ol> + </div> + + + + + + + + + + + + <h3>Gradient Descriptor</h3> + + + + + + + + <p>The gradient descriptor is an expression formatted as +follows: <code><type>(<coords>)<colors></code>. The <code><type></code> can be +either linear or radial. The uppercase <code>L</code> or <code>R</code> letters +indicate absolute coordinates offset from the SVG surface. +Lowercase <code>l</code> or <code>r</code> letters indicate coordinates +calculated relative to the element to which the gradient is +applied. Coordinates specify a linear gradient vector as +<code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>, or a radial gradient as <code>cx</code>, <code>cy</code>, +<code>r</code> and optional <code>fx</code>, <code>fy</code> specifying a focal point away +from the center of the circle. Specify <code><colors></code> as a list +of dash-separated CSS color values. Each color may be +followed by a custom offset value, separated with a colon +character. +</p> + + + + + + + + + + + + + <h3>Examples</h3> + + + + + + + + <p>Linear gradient, relative from top-left corner to bottom-right +corner, from black through red to white: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");</code></pre></section> + + + + + + + <p>Linear gradient, absolute from (0, 0) to (100, 100), from black +through red at 25% to white: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25-#fff");</code></pre></section> + + + + + + + <p>Radial gradient, relative from the center of the element with radius +half the width, from black to white: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");</code></pre></section> + + + + + + + <p>To apply the gradient: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">paper.circle(50, 50, 40).attr({ + fill: g +});</code></pre></section> + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">the <code>gradient</code> element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.toString"> + <header> + <h3 class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 675 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L675">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.toString-extra"></div> + <div class="dr-method"> + + + + + <p>Returns SVG code for the <a href="#Paper" class="dr-link">Paper</a> +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">SVG code for the <a href="#Paper" class="dr-link">Paper</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.toDataURL"> + <header> + <h3 class="dr-method">Paper.toDataURL()<a href="#Paper.toDataURL" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 695 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L695">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.toDataURL-extra"></div> + <div class="dr-method"> + + + + + <p>Returns SVG code for the <a href="#Paper" class="dr-link">Paper</a> as Data URI string. +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">Data URI string</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.clear"> + <header> + <h3 class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 706 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L706">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.clear-extra"></div> + <div class="dr-method"> + + + + + <p>Removes all child nodes of the paper, except <defs>. +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Element.addClass"> + <header> + <h3 class="dr-method">Element.addClass(value)<a href="#Element.addClass" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 29 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L29">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.addClass-extra"></div> + <div class="dr-method"> + + + + + <p>Adds given class name or list of class names to the element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">value</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">class name or space separated list of class names</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">original element.</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.removeClass"> + <header> + <h3 class="dr-method">Element.removeClass(value)<a href="#Element.removeClass" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 64 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L64">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.removeClass-extra"></div> + <div class="dr-method"> + + + + + <p>Removes given class name or list of class names from the element. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">value</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">class name or space separated list of class names</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">original element.</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.hasClass"> + <header> + <h3 class="dr-method">Element.hasClass(value)<a href="#Element.hasClass" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 98 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L98">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.hasClass-extra"></div> + <div class="dr-method"> + + + + + <p>Checks if the element has a given class name in the list of class names applied to it. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">value</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">class name</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-boolean">boolean</em> + + <span class="dr-description"><code>true</code> if the element has given class</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.toggleClass"> + <header> + <h3 class="dr-method">Element.toggleClass(value, flag)<a href="#Element.toggleClass" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 115 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L115">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.toggleClass-extra"></div> + <div class="dr-method"> + + + + + <p>Add or remove one or more classes from the element, depending on either +the class’s presence or the value of the <code>flag</code> argument. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">value</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">class name or space separated list of class names</span></li> + <li class="topcoat-list__item"><span class="dr-param">flag</span> + <span class="dr-type"><em class="dr-type-boolean">boolean</em> </span> + <span class="dr-description">value to determine whether the class should be added or removed</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">original element.</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina"> + <header> + <h3 class="dr-method">mina(a, A, b, B, get, set, [easing])<a href="#mina" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 168 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L168">➭</a></h3> + </header> + <section> + <div class="extra" id="mina-extra"></div> + <div class="dr-method"> + + + + + <p>Generic animation of numbers +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">a</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">start <em>slave</em> number</span></li> + <li class="topcoat-list__item"><span class="dr-param">A</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">end <em>slave</em> number</span></li> + <li class="topcoat-list__item"><span class="dr-param">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">start <em>master</em> number (start time in general case)</span></li> + <li class="topcoat-list__item"><span class="dr-param">B</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">end <em>master</em> number (end time in gereal case)</span></li> + <li class="topcoat-list__item"><span class="dr-param">get</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">getter of <em>master</em> number (see <a href="#mina.time" class="dr-link">mina.time</a>)</span></li> + <li class="topcoat-list__item"><span class="dr-param">set</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">setter of <em>slave</em> number</span></li> + <li class="topcoat-list__item"><span class="dr-param">easing</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">easing function, default is <a href="#mina.linear" class="dr-link">mina.linear</a></span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">animation descriptor</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">id</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-json-description">animation id,</span> + </li> + + + + <li> + <span class="dr-json-key">start</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">start <em>slave</em> number,</span> + </li> + + + + <li> + <span class="dr-json-key">end</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">end <em>slave</em> number,</span> + </li> + + + + <li> + <span class="dr-json-key">b</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">start <em>master</em> number,</span> + </li> + + + + <li> + <span class="dr-json-key">s</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">animation status (0..1),</span> + </li> + + + + <li> + <span class="dr-json-key">dur</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">animation duration,</span> + </li> + + + + <li> + <span class="dr-json-key">spd</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">animation speed,</span> + </li> + + + + <li> + <span class="dr-json-key">get</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">getter of <em>master</em> number (see <a href="#mina.time" class="dr-link">mina.time</a>),</span> + </li> + + + + <li> + <span class="dr-json-key">set</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">setter of <em>slave</em> number,</span> + </li> + + + + <li> + <span class="dr-json-key">easing</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">easing function, default is <a href="#mina.linear" class="dr-link">mina.linear</a>,</span> + </li> + + + + <li> + <span class="dr-json-key">status</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">status getter/setter,</span> + </li> + + + + <li> + <span class="dr-json-key">speed</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">speed getter/setter,</span> + </li> + + + + <li> + <span class="dr-json-key">duration</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">duration getter/setter,</span> + </li> + + + + <li> + <span class="dr-json-key">stop</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">animation stopper</span> + </li> + + + + <li> + <span class="dr-json-key">pause</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">pauses the animation</span> + </li> + + + + <li> + <span class="dr-json-key">resume</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">resumes the animation</span> + </li> + + + + <li> + <span class="dr-json-key">update</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-json-description">calles setter with the right value of the animation</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="mina.time"> + <header> + <h3 class="dr-method">mina.time()<a href="#mina.time" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 208 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L208">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.time-extra"></div> + <div class="dr-method"> + + + + + <p>Returns the current time. Equivalent to: +</p> + + + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">function () { + return (new Date).getTime(); +}</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="mina.getById"> + <header> + <h3 class="dr-method">mina.getById(id)<a href="#mina.getById" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 217 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L217">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.getById-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an animation by its id +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">id</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">animation's id</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">See <a href="#mina" class="dr-link">mina</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.linear"> + <header> + <h3 class="dr-method">mina.linear(n)<a href="#mina.linear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 229 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L229">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.linear-extra"></div> + <div class="dr-method"> + + + + + <p>Default linear easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.easeout"> + <header> + <h3 class="dr-method">mina.easeout(n)<a href="#mina.easeout" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 240 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L240">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.easeout-extra"></div> + <div class="dr-method"> + + + + + <p>Easeout easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.easein"> + <header> + <h3 class="dr-method">mina.easein(n)<a href="#mina.easein" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 251 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L251">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.easein-extra"></div> + <div class="dr-method"> + + + + + <p>Easein easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.easeinout"> + <header> + <h3 class="dr-method">mina.easeinout(n)<a href="#mina.easeinout" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 262 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L262">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.easeinout-extra"></div> + <div class="dr-method"> + + + + + <p>Easeinout easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.backin"> + <header> + <h3 class="dr-method">mina.backin(n)<a href="#mina.backin" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 286 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L286">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.backin-extra"></div> + <div class="dr-method"> + + + + + <p>Backin easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.backout"> + <header> + <h3 class="dr-method">mina.backout(n)<a href="#mina.backout" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 301 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L301">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.backout-extra"></div> + <div class="dr-method"> + + + + + <p>Backout easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.elastic"> + <header> + <h3 class="dr-method">mina.elastic(n)<a href="#mina.elastic" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 317 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L317">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.elastic-extra"></div> + <div class="dr-method"> + + + + + <p>Elastic easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="mina.bounce"> + <header> + <h3 class="dr-method">mina.bounce(n)<a href="#mina.bounce" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 332 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L332">➭</a></h3> + </header> + <section> + <div class="extra" id="mina.bounce-extra"></div> + <div class="dr-method"> + + + + + <p>Bounce easing +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">n</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">input 0..1</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">output 0..1</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Paper.filter"> + <header> + <h3 class="dr-method">Paper.filter(filstr)<a href="#Paper.filter" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 36 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L36">➭</a></h3> + </header> + <section> + <div class="extra" id="Paper.filter-extra"></div> + <div class="dr-method"> + + + + + <p>Creates a <code><filter></code> element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">filstr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">SVG fragment of filter provided as a string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + + <p>Note: It is recommended to use filters embedded into the page inside an empty SVG element. +</p> + + + + + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var f = paper.filter('<feGaussianBlur stdDeviation="2"/>'), + c = paper.circle(10, 10, 10).attr({ + filter: f + });</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Snap.filter.blur"> + <header> + <h3 class="dr-method">Snap.filter.blur(x, [y])<a href="#Snap.filter.blur" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 95 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L95">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.blur-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the blur filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of horizontal blur, in pixels</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of vertical blur, in pixels</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var f = paper.filter(Snap.filter.blur(5, 10)), + c = paper.circle(10, 10, 10).attr({ + filter: f + });</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Snap.filter.shadow"> + <header> + <h3 class="dr-method">Snap.filter.shadow(…)<a href="#Snap.filter.shadow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 134 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L134">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.shadow-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the shadow filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">dx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal shift of the shadow, in pixels</span></li> + <li class="topcoat-list__item"><span class="dr-param">dy</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical shift of the shadow, in pixels</span></li> + <li class="topcoat-list__item"><span class="dr-param">blur</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of blur</span></li> + <li class="topcoat-list__item"><span class="dr-param">color</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">color of the shadow</span></li> + <li class="topcoat-list__item"><span class="dr-param">opacity</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><code>0..1</code> opacity of the shadow</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">dx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal shift of the shadow, in pixels</span></li> + <li class="topcoat-list__item"><span class="dr-param">dy</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical shift of the shadow, in pixels</span></li> + <li class="topcoat-list__item"><span class="dr-param">color</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">color of the shadow</span></li> + <li class="topcoat-list__item"><span class="dr-param">opacity</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><code>0..1</code> opacity of the shadow</span></li> + + </ol> + </div> + + + + + + + + + <p>which makes blur default to <code>4</code>. Or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">dx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">horizontal shift of the shadow, in pixels</span></li> + <li class="topcoat-list__item"><span class="dr-param">dy</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">vertical shift of the shadow, in pixels</span></li> + <li class="topcoat-list__item"><span class="dr-param">opacity</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description"><code>0..1</code> opacity of the shadow</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var f = paper.filter(Snap.filter.shadow(0, 2, 3)), + c = paper.circle(10, 10, 10).attr({ + filter: f + });</code></pre></section> + + + + + + </div> + </section> + </article> + + <article id="Snap.filter.grayscale"> + <header> + <h3 class="dr-method">Snap.filter.grayscale(amount)<a href="#Snap.filter.grayscale" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 179 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L179">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.grayscale-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the grayscale filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">amount</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of filter (<code>0..1</code>)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.filter.sepia"> + <header> + <h3 class="dr-method">Snap.filter.sepia(amount)<a href="#Snap.filter.sepia" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 206 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L206">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.sepia-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the sepia filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">amount</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of filter (<code>0..1</code>)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.filter.saturate"> + <header> + <h3 class="dr-method">Snap.filter.saturate(amount)<a href="#Snap.filter.saturate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 234 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L234">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.saturate-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the saturate filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">amount</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of filter (<code>0..1</code>)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.filter.hueRotate"> + <header> + <h3 class="dr-method">Snap.filter.hueRotate(angle)<a href="#Snap.filter.hueRotate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 254 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L254">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.hueRotate-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the hue-rotate filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">angle</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">angle of rotation</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.filter.invert"> + <header> + <h3 class="dr-method">Snap.filter.invert(amount)<a href="#Snap.filter.invert" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 272 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L272">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.invert-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the invert filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">amount</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of filter (<code>0..1</code>)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.filter.brightness"> + <header> + <h3 class="dr-method">Snap.filter.brightness(amount)<a href="#Snap.filter.brightness" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 294 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L294">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.brightness-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the brightness filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">amount</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of filter (<code>0..1</code>)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.filter.contrast"> + <header> + <h3 class="dr-method">Snap.filter.contrast(amount)<a href="#Snap.filter.contrast" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 314 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L314">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.filter.contrast-extra"></div> + <div class="dr-method"> + + + + + <p>Returns an SVG markup string for the contrast filter +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">amount</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">amount of filter (<code>0..1</code>)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">filter representation</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.click"> + <header> + <h3 class="dr-method">Element.click(handler)<a href="#Element.click" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 143 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L143">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.click-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a click event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.unclick"> + <header> + <h3 class="dr-method">Element.unclick(handler)<a href="#Element.unclick" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 151 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L151">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.unclick-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a click event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.dblclick"> + <header> + <h3 class="dr-method">Element.dblclick(handler)<a href="#Element.dblclick" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 160 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L160">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.dblclick-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a double click event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.undblclick"> + <header> + <h3 class="dr-method">Element.undblclick(handler)<a href="#Element.undblclick" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 168 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L168">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.undblclick-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a double click event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.mousedown"> + <header> + <h3 class="dr-method">Element.mousedown(handler)<a href="#Element.mousedown" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 177 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L177">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.mousedown-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a mousedown event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.unmousedown"> + <header> + <h3 class="dr-method">Element.unmousedown(handler)<a href="#Element.unmousedown" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 185 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L185">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.unmousedown-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a mousedown event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.mousemove"> + <header> + <h3 class="dr-method">Element.mousemove(handler)<a href="#Element.mousemove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 194 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L194">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.mousemove-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a mousemove event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.unmousemove"> + <header> + <h3 class="dr-method">Element.unmousemove(handler)<a href="#Element.unmousemove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 202 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L202">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.unmousemove-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a mousemove event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.mouseout"> + <header> + <h3 class="dr-method">Element.mouseout(handler)<a href="#Element.mouseout" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 211 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L211">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.mouseout-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a mouseout event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.unmouseout"> + <header> + <h3 class="dr-method">Element.unmouseout(handler)<a href="#Element.unmouseout" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 219 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L219">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.unmouseout-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a mouseout event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.mouseover"> + <header> + <h3 class="dr-method">Element.mouseover(handler)<a href="#Element.mouseover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 228 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L228">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.mouseover-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a mouseover event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.unmouseover"> + <header> + <h3 class="dr-method">Element.unmouseover(handler)<a href="#Element.unmouseover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 236 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L236">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.unmouseover-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a mouseover event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.mouseup"> + <header> + <h3 class="dr-method">Element.mouseup(handler)<a href="#Element.mouseup" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 245 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L245">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.mouseup-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a mouseup event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.unmouseup"> + <header> + <h3 class="dr-method">Element.unmouseup(handler)<a href="#Element.unmouseup" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 253 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L253">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.unmouseup-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a mouseup event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.touchstart"> + <header> + <h3 class="dr-method">Element.touchstart(handler)<a href="#Element.touchstart" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 262 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L262">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.touchstart-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a touchstart event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.untouchstart"> + <header> + <h3 class="dr-method">Element.untouchstart(handler)<a href="#Element.untouchstart" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 270 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L270">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.untouchstart-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a touchstart event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.touchmove"> + <header> + <h3 class="dr-method">Element.touchmove(handler)<a href="#Element.touchmove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 279 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L279">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.touchmove-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a touchmove event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.untouchmove"> + <header> + <h3 class="dr-method">Element.untouchmove(handler)<a href="#Element.untouchmove" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 287 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L287">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.untouchmove-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a touchmove event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.touchend"> + <header> + <h3 class="dr-method">Element.touchend(handler)<a href="#Element.touchend" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 296 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L296">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.touchend-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a touchend event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.untouchend"> + <header> + <h3 class="dr-method">Element.untouchend(handler)<a href="#Element.untouchend" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 304 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L304">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.untouchend-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a touchend event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.touchcancel"> + <header> + <h3 class="dr-method">Element.touchcancel(handler)<a href="#Element.touchcancel" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 313 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L313">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.touchcancel-extra"></div> + <div class="dr-method"> + + + + + <p>Adds a touchcancel event handler to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.untouchcancel"> + <header> + <h3 class="dr-method">Element.untouchcancel(handler)<a href="#Element.untouchcancel" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 321 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L321">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.untouchcancel-extra"></div> + <div class="dr-method"> + + + + + <p>Removes a touchcancel event handler from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">handler</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for the event</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.hover"> + <header> + <h3 class="dr-method">Element.hover(f_in, f_out, [icontext], [ocontext])<a href="#Element.hover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 366 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L366">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.hover-extra"></div> + <div class="dr-method"> + + + + + <p>Adds hover event handlers to the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">f_in</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for hover in</span></li> + <li class="topcoat-list__item"><span class="dr-param">f_out</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for hover out</span></li> + <li class="topcoat-list__item"><span class="dr-param">icontext</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">context for hover in handler</span></li> + <li class="topcoat-list__item"><span class="dr-param">ocontext</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">context for hover out handler</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.unhover"> + <header> + <h3 class="dr-method">Element.unhover(f_in, f_out)<a href="#Element.unhover" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 378 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L378">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.unhover-extra"></div> + <div class="dr-method"> + + + + + <p>Removes hover event handlers from the element +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">f_in</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for hover in</span></li> + <li class="topcoat-list__item"><span class="dr-param">f_out</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for hover out</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.drag"> + <header> + <h3 class="dr-method">Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])<a href="#Element.drag" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 416 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L416">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.drag-extra"></div> + <div class="dr-method"> + + + + + <p>Adds event handlers for an element's drag gesture +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">onmove</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for moving</span></li> + <li class="topcoat-list__item"><span class="dr-param">onstart</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for drag start</span></li> + <li class="topcoat-list__item"><span class="dr-param">onend</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">handler for drag end</span></li> + <li class="topcoat-list__item"><span class="dr-param">mcontext</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">context for moving handler</span></li> + <li class="topcoat-list__item"><span class="dr-param">scontext</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">context for drag start handler</span></li> + <li class="topcoat-list__item"><span class="dr-param">econtext</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">context for drag end handler</span></li> + + </ol> + </div> + + + + + + + + + <p>Additionaly following <code>drag</code> events are triggered: <code>drag.start.<id></code> on start, +<code>drag.end.<id></code> on end and <code>drag.move.<id></code> on every move. When element is dragged over another element +<code>drag.over.<id></code> fires as well. +</p><p>Start event and start handler are called in specified context or in context of the element with following parameters: +</p> + + + + + + + + + + + + + + + + <ol class="dr-json"> + + + <li> + <span class="dr-json-key">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x position of the mouse</span> + </li> + + + + <li> + <span class="dr-json-key">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y position of the mouse</span> + </li> + + + + <li> + <span class="dr-json-key">event</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-json-description">DOM event object</span> + </li> + + + </ol> + + + + <p>Move event and move handler are called in specified context or in context of the element with following parameters: +</p> + + + + + + + + + + + + + + + + <ol class="dr-json"> + + + <li> + <span class="dr-json-key">dx</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">shift by x from the start point</span> + </li> + + + + <li> + <span class="dr-json-key">dy</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">shift by y from the start point</span> + </li> + + + + <li> + <span class="dr-json-key">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x position of the mouse</span> + </li> + + + + <li> + <span class="dr-json-key">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y position of the mouse</span> + </li> + + + + <li> + <span class="dr-json-key">event</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-json-description">DOM event object</span> + </li> + + + </ol> + + + + <p>End event and end handler are called in specified context or in context of the element with following parameters: +</p> + + + + + + + + + + + + + + + + <ol class="dr-json"> + + + <li> + <span class="dr-json-key">event</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-json-description">DOM event object</span> + </li> + + + </ol> + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.undrag"> + <header> + <h3 class="dr-method">Element.undrag()<a href="#Element.undrag" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 465 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L465">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.undrag-extra"></div> + <div class="dr-method"> + + + + + <p>Removes all drag event handlers from the given element +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Snap.path.getTotalLength"> + <header> + <h3 class="dr-method">Snap.path.getTotalLength(path)<a href="#Snap.path.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1127 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1127">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.getTotalLength-extra"></div> + <div class="dr-method"> + + + + + <p>Returns the length of the given path in pixels +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">SVG path string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">length</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.getPointAtLength"> + <header> + <h3 class="dr-method">Snap.path.getPointAtLength(path, length)<a href="#Snap.path.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1144 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1144">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.getPointAtLength-extra"></div> + <div class="dr-method"> + + + + + <p>Returns the coordinates of the point located at the given length along the given path +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">SVG path string</span></li> + <li class="topcoat-list__item"><span class="dr-param">length</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">length, in pixels, from the start of the path, excluding non-rendering jumps</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">representation of the point:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate,</span> + </li> + + + + <li> + <span class="dr-json-key">alpha:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">angle of derivative</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.path.getSubpath"> + <header> + <h3 class="dr-method">Snap.path.getSubpath(path, from, to)<a href="#Snap.path.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1157 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1157">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.getSubpath-extra"></div> + <div class="dr-method"> + + + + + <p>Returns the subpath of a given path between given start and end lengths +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">SVG path string</span></li> + <li class="topcoat-list__item"><span class="dr-param">from</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">length, in pixels, from the start of the path to the start of the segment</span></li> + <li class="topcoat-list__item"><span class="dr-param">to</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">length, in pixels, from the start of the path to the end of the segment</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">path string definition for the segment</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.getTotalLength"> + <header> + <h3 class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1171 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1171">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.getTotalLength-extra"></div> + <div class="dr-method"> + + + + + <p>Returns the length of the path in pixels (only works for <code>path</code> elements) +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-number">number</em> + + <span class="dr-description">length</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Element.getPointAtLength"> + <header> + <h3 class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1192 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1192">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.getPointAtLength-extra"></div> + <div class="dr-method"> + + + + + <p>Returns coordinates of the point located at the given length on the given path (only works for <code>path</code> elements) +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">length</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">length, in pixels, from the start of the path, excluding non-rendering jumps</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">representation of the point:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate,</span> + </li> + + + + <li> + <span class="dr-json-key">alpha:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">angle of derivative</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Element.getSubpath"> + <header> + <h3 class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1207 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1207">➭</a></h3> + </header> + <section> + <div class="extra" id="Element.getSubpath-extra"></div> + <div class="dr-method"> + + + + + <p>Returns subpath of a given element from given start and end lengths (only works for <code>path</code> elements) +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">from</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">length, in pixels, from the start of the path to the start of the segment</span></li> + <li class="topcoat-list__item"><span class="dr-param">to</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">length, in pixels, from the start of the path to the end of the segment</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">path string definition for the segment</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.findDotsAtSegment"> + <header> + <h3 class="dr-method">Snap.path.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Snap.path.findDotsAtSegment" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1250 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1250">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.findDotsAtSegment-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Finds dot coordinates on the given cubic beziér curve at the given t +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">p1x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the first point of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">p1y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the first point of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c1x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the first anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c1y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the first anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c2x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the second anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c2y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the second anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">p2x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the second point of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">p2y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the second point of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">t</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">position on the curve (0..1)</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">point information in format:</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the point,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the point,</span> + </li> + + + + <li> m: {<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the left anchor,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the left anchor</span> + </li> + + + + </ol></li><li> },</li> + + + + <li> n: {<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the right anchor,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the right anchor</span> + </li> + + + + </ol></li><li> },</li> + + + + <li> start: {<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the start of the curve,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the start of the curve</span> + </li> + + + + </ol></li><li> },</li> + + + + <li> end: {<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the end of the curve,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the end of the curve</span> + </li> + + + + </ol></li><li> },</li> + + + + <li> + <span class="dr-json-key">alpha:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">angle of the curve derivative at the point</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.path.bezierBBox"> + <header> + <h3 class="dr-method">Snap.path.bezierBBox(…)<a href="#Snap.path.bezierBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1278 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1278">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.bezierBBox-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Returns the bounding box of a given cubic beziér curve +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">p1x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the first point of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">p1y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the first point of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c1x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the first anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c1y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the first anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c2x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the second anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">c2y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the second anchor of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">p2x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the second point of the curve</span></li> + <li class="topcoat-list__item"><span class="dr-param">p2y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the second point of the curve</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">bez</span> + <span class="dr-type"><em class="dr-type-array">array</em> </span> + <span class="dr-description">array of six points for beziér curve</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">bounding box</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the left top point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the left top point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">x2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the right bottom point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">y2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the right bottom point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">width:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">width of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">height:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">height of the box</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.path.isPointInsideBBox"> + <header> + <h3 class="dr-method">Snap.path.isPointInsideBBox(bbox, x, y)<a href="#Snap.path.isPointInsideBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1291 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1291">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.isPointInsideBBox-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Returns <code>true</code> if given point is inside bounding box +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">bbox</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">bounding box</span></li> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">x coordinate of the point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">y coordinate of the point</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-boolean">boolean</em> + + <span class="dr-description"><code>true</code> if point is inside</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.isBBoxIntersect"> + <header> + <h3 class="dr-method">Snap.path.isBBoxIntersect(bbox1, bbox2)<a href="#Snap.path.isBBoxIntersect" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1348 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1348">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.isBBoxIntersect-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Returns <code>true</code> if two bounding boxes intersect +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">bbox1</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">first bounding box</span></li> + <li class="topcoat-list__item"><span class="dr-param">bbox2</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">second bounding box</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-boolean">boolean</em> + + <span class="dr-description"><code>true</code> if bounding boxes intersect</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.intersection"> + <header> + <h3 class="dr-method">Snap.path.intersection(path1, path2)<a href="#Snap.path.intersection" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1372 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1372">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.intersection-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Finds intersections of two paths +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path1</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string</span></li> + <li class="topcoat-list__item"><span class="dr-param">path2</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-array">array</em> + + <span class="dr-description">dots of intersection</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>[</li> + + + + <li> {<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the point,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the point,</span> + </li> + + + + <li> + <span class="dr-json-key">t1:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">t value for segment of path1,</span> + </li> + + + + <li> + <span class="dr-json-key">t2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">t value for segment of path2,</span> + </li> + + + + <li> + <span class="dr-json-key">segment1:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">order number for segment of path1,</span> + </li> + + + + <li> + <span class="dr-json-key">segment2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">order number for segment of path2,</span> + </li> + + + + <li> + <span class="dr-json-key">bez1:</span> + <span class="dr-type"><em class="dr-type-array">array</em> </span> + <span class="dr-json-description">eight coordinates representing beziér curve for the segment of path1,</span> + </li> + + + + <li> + <span class="dr-json-key">bez2:</span> + <span class="dr-type"><em class="dr-type-array">array</em> </span> + <span class="dr-json-description">eight coordinates representing beziér curve for the segment of path2</span> + </li> + + + + </ol></li><li> }</li> + + + + <li>]</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.path.isPointInside"> + <header> + <h3 class="dr-method">Snap.path.isPointInside(path, x, y)<a href="#Snap.path.isPointInside" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1388 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1388">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.isPointInside-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Returns <code>true</code> if given point is inside a given closed path. +</p><p>Note: fill mode doesn’t affect the result of this method. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string</span></li> + <li class="topcoat-list__item"><span class="dr-param">x</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">x of the point</span></li> + <li class="topcoat-list__item"><span class="dr-param">y</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">y of the point</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-boolean">boolean</em> + + <span class="dr-description"><code>true</code> if point is inside the path</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.getBBox"> + <header> + <h3 class="dr-method">Snap.path.getBBox(path)<a href="#Snap.path.getBBox" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1407 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1407">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.getBBox-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Returns the bounding box of a given path +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">bounding box</span> + </p> + + + + + + + + + + + + <ol class="dr-json"> + + + <li>{<ol class="dr-json"> + + + + <li> + <span class="dr-json-key">x:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the left top point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">y:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the left top point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">x2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">x coordinate of the right bottom point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">y2:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">y coordinate of the right bottom point of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">width:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">width of the box,</span> + </li> + + + + <li> + <span class="dr-json-key">height:</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-json-description">height of the box</span> + </li> + + + + </ol></li><li>}</li> + + + </ol> + + + </div> + </section> + </article> + + <article id="Snap.path.toRelative"> + <header> + <h3 class="dr-method">Snap.path.toRelative(path)<a href="#Snap.path.toRelative" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1419 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1419">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.toRelative-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Converts path coordinates into relative values +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-array">array</em> + + <span class="dr-description">path string</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.toAbsolute"> + <header> + <h3 class="dr-method">Snap.path.toAbsolute(path)<a href="#Snap.path.toAbsolute" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1430 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1430">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.toAbsolute-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Converts path coordinates into absolute values +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-array">array</em> + + <span class="dr-description">path string</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.toCubic"> + <header> + <h3 class="dr-method">Snap.path.toCubic(pathString)<a href="#Snap.path.toCubic" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1441 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1441">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.toCubic-extra"></div> + <div class="dr-method"> + + + + + <p>Utility method +Converts path to a new path where all segments are cubic beziér curves +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">pathString</span> + <span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-array">array</em> </span> + <span class="dr-description">path string or array of segments</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-array">array</em> + + <span class="dr-description">array of segments</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Snap.path.map"> + <header> + <h3 class="dr-method">Snap.path.map(path, matrix)<a href="#Snap.path.map" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1451 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L1451">➭</a></h3> + </header> + <section> + <div class="extra" id="Snap.path.map-extra"></div> + <div class="dr-method"> + + + + + <p>Transform the path string with the given matrix +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">path</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">path string</span></li> + <li class="topcoat-list__item"><span class="dr-param">matrix</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">see <a href="#Matrix" class="dr-link">Matrix</a></span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-string">string</em> + + <span class="dr-description">transformed path string</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Set.push"> + <header> + <h3 class="dr-method">Set.push()<a href="#Set.push" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 41 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L41">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.push-extra"></div> + <div class="dr-method"> + + + + + <p>Adds each argument to the current set +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">original element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Set.pop"> + <header> + <h3 class="dr-method">Set.pop()<a href="#Set.pop" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 61 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L61">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.pop-extra"></div> + <div class="dr-method"> + + + + + <p>Removes last element and returns it +</p> + + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Set.forEach"> + <header> + <h3 class="dr-method">Set.forEach(callback, thisArg)<a href="#Set.forEach" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 77 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L77">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.forEach-extra"></div> + <div class="dr-method"> + + + + + <p>Executes given function for each element in the set +</p><p>If the function returns <code>false</code>, the loop stops running. +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">function to run</span></li> + <li class="topcoat-list__item"><span class="dr-param">thisArg</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">context object for the callback</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">Set object</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Set.animate"> + <header> + <h3 class="dr-method">Set.animate(…)<a href="#Set.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 106 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L106">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.animate-extra"></div> + <div class="dr-method"> + + + + + <p>Animates each element in set in sync. +</p><p></p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">attrs</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">key-value pairs of destination attributes</span></li> + <li class="topcoat-list__item"><span class="dr-param">duration</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">duration of the animation in milliseconds</span></li> + <li class="topcoat-list__item"><span class="dr-param">easing</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">easing function from <a href="#mina" class="dr-link">mina</a> or custom</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">callback function that executes when the animation ends</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">animation</span> + <span class="dr-type"><em class="dr-type-array">array</em> </span> + <span class="dr-description">array of animation parameter for each element in set in format <code>[attrs, duration, easing, callback]</code></span></li> + + </ol> + </div> + + + + + + + + + + + + <h3>Usage</h3> + + + + + + + + + + + + <section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// animate all elements in set to radius 10 +set.animate({r: 10}, 500, mina.easein); +// or +// animate first element to radius 10, but second to radius 20 and in different time +set.animate([{r: 10}, 500, mina.easein], [{r: 20}, 1500, mina.easein]);</code></pre></section> + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-Element">Element</em> + + <span class="dr-description">the current element</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Set.bind"> + <header> + <h3 class="dr-method">Set.bind(…)<a href="#Set.bind" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 170 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L170">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.bind-extra"></div> + <div class="dr-method"> + + + + + <p>Specifies how to handle a specific attribute when applied +to a set. +</p><p></p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">attr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">attribute name</span></li> + <li class="topcoat-list__item"><span class="dr-param">callback</span> + <span class="dr-type"><em class="dr-type-function">function</em> </span> + <span class="dr-description">function to run</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">attr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">attribute name</span></li> + <li class="topcoat-list__item"><span class="dr-param">element</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">specific element in the set to apply the attribute to</span></li> + + </ol> + </div> + + + + + + + + + <p>or +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">attr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">attribute name</span></li> + <li class="topcoat-list__item"><span class="dr-param">element</span> + <span class="dr-type"><em class="dr-type-Element">Element</em> </span> + <span class="dr-description">specific element in the set to apply the attribute to</span></li> + <li class="topcoat-list__item"><span class="dr-param">eattr</span> + <span class="dr-type"><em class="dr-type-string">string</em> </span> + <span class="dr-description">attribute on the element to bind the attribute to</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">Set object</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Set.clear"> + <header> + <h3 class="dr-method">Set.clear()<a href="#Set.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 203 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L203">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.clear-extra"></div> + <div class="dr-method"> + + + + + <p>Removes all elements from the set +</p> + + + + + + + + + </div> + </section> + </article> + + <article id="Set.splice"> + <header> + <h3 class="dr-method">Set.splice(index, count, [insertion…])<a href="#Set.splice" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 219 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L219">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.splice-extra"></div> + <div class="dr-method"> + + + + + <p>Removes range of elements from the set +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">index</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">position of the deletion</span></li> + <li class="topcoat-list__item"><span class="dr-param">count</span> + <span class="dr-type"><em class="dr-type-number">number</em> </span> + <span class="dr-description">number of element to remove</span></li> + <li class="topcoat-list__item"><span class="dr-param">insertion…</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">elements to insert</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-object">object</em> + + <span class="dr-description">set elements that were deleted</span> + </p> + + + + + </div> + </section> + </article> + + <article id="Set.exclude"> + <header> + <h3 class="dr-method">Set.exclude(element)<a href="#Set.exclude" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 254 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L254">➭</a></h3> + </header> + <section> + <div class="extra" id="Set.exclude-extra"></div> + <div class="dr-method"> + + + + + <p>Removes given element from the set +</p> + + + + + + + + + + + <div class="topcoat-list__container"> + <h3 class="topcoat-list__header">Parameters</h3> + <ol class="topcoat-list"> + <li class="topcoat-list__item"><span class="dr-param">element</span> + <span class="dr-type"><em class="dr-type-object">object</em> </span> + <span class="dr-description">element to remove</span></li> + + </ol> + </div> + + + + + + + + + + + + + + <p class="dr-returns"> + <strong class="dr-title">Returns:</strong> + + <em class="dr-type-boolean">boolean</em> + + <span class="dr-description"><code>true</code> if object was found and removed from the set</span> + </p> + + + + + </div> + </section> + </article> + + </div> + <footer></footer> + </div> + </div> + <!-- <script src="//use.edgefonts.net/source-sans-pro:n3,n4,n6;source-code-pro:n3.js"></script> --> + <script src="/assets/docs/js/prism.js"></script> +<script>!function(e){if(e){for(var t=function(e,t){var n=t.toUpperCase().split(""),r=n.shift(),a=RegExp("^["+r.toLowerCase()+r+"][a-z]*"+n.join("[a-z]*")+"[a-z]*$") +return!!(e+"").match(a)},n=function(e,n){e+="",n+="" +var r,a=0 +if(e==n)return 1 +if(!e||!n)return 0 +if(t(e,n))return.9 +a=0,r=e.toLowerCase() +for(var i,o=0,l=n.length;l>o;o++)i=r.indexOf(n.charAt(o)),~i&&(r=r.substring(i+1),a+=1/(i+1)) +return a=Math.max(a/l-Math.abs(e.length-l)/e.length/2,0)},r=e.getElementsByTagName("span"),a=[],i=/[^\.\(]*(?=(\(\))?$)/,o=0,l=r.length;l>o;o++)a[o]={li:r[o].parentNode.parentNode,text:r[o].innerHTML.match(i)[0]} +var h=document.getElementById("dr-filter"),f=function(e,t){return t.weight-e.weight} +h.onclick=h.onchange=h.onkeydown=h.onkeyup=function(){var t=h.value,r=[] +if(t.length>1){for(var i=0,o=a.length;o>i;i++)r[i]={li:a[i].li,weight:n(a[i].text,t)} +r.sort(f)}else r=a +for(i=0,o=r.length;o>i;i++)e.appendChild(r[i].li)}}}(document.getElementById("dr-toc"))</script> +</body></html> |