2051 lines
234 KiB
HTML
2051 lines
234 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Snap.svg API Reference</title>
|
||
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
|
||
<link rel="stylesheet" href="fonts/stylesheet.css"><link rel="stylesheet" href="css/topcoat-desktop-light.css">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<link rel="stylesheet" href="css/dr.css">
|
||
<link rel="stylesheet" href="css/prism.css"><!--[if lt IE 9]>
|
||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
||
</head>
|
||
<body class="light">
|
||
<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="{clas}"><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.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.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.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.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.parent" class="dr-method"><span>Element.parent()</span></a></li><li class="dr-lvl1"><a href="#Element.pattern" class="dr-method"><span>Element.pattern()</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.remove" class="dr-method"><span>Element.remove()</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.toString" class="dr-method"><span>Element.toString()</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.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="{clas}"><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="{clas}"><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.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="{clas}"><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.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.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.rect" class="dr-method"><span>Paper.rect()</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.toString" class="dr-method"><span>Paper.toString()</span></a></li><li class="dr-lvl0"><a href="#Set" class="{clas}"><span>Set</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="{clas}"><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.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.color" class="dr-method"><span>Snap.color()</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="{clas}"><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.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.load" class="dr-method"><span>Snap.load()</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="{clas}"><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.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.snapTo" class="dr-method"><span>Snap.snapTo()</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">
|
||
<header id="main-header">
|
||
<div class="max-width">
|
||
<hgroup>
|
||
<h1>Snap.svg</h1>
|
||
<p>API Reference</p>
|
||
</hgroup>
|
||
</div>
|
||
</header>
|
||
<div id="content" class="max-width"><article id="Element" class="Element-section"><header><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">⚓</a></h2></header>
|
||
<section><div class="extra" id="Element-extra"></div></section></article><article id="Element.add" class="Element-add-section"><header><h3 id="Element.add" 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 1624 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1624">➭</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.after" class="Element-after-section"><header><h3 id="Element.after" 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 1677 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1677">➭</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">parent</span></p>
|
||
</div></section></article><article id="Element.animate" class="Element-animate-section"><header><h3 id="Element.animate" class="dr-method">Element.animate(attrs, ms, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2107 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2107">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.animate-extra"></div><div class="dr-method"><p>Animate 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">ms</span>
|
||
<span class="dr-type"><em class="dr-type-number">number</em></span>
|
||
<span class="dr-description">duration</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
|
||
<span class="dr-optional">optional</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 optional">callback</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-function">function</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 element</span></p>
|
||
</div></section></article><article id="Element.append" class="Element-append-section"><header><h3 id="Element.append" 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 1618 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1618">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.append-extra"></div><div class="dr-method"><p>Appends 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">parent</span></p>
|
||
</div></section></article><article id="Element.asPX" class="Element-asPX-section"><header><h3 id="Element.asPX" 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 1765 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1765">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.asPX-extra"></div><div class="dr-method"><p>Return 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 optional">value</span>
|
||
<span class="dr-optional">optional</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.attr" class="Element-attr-section"><header><h3 id="Element.attr" 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 1465 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1465">➭</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">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"></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
|
||
});
|
||
console.log(el.attr("fill")); // “#fc0”
|
||
</code></pre></section>
|
||
</div></section></article><article id="Element.before" class="Element-before-section"><header><h3 id="Element.before" 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 1661 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1661">➭</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">parent</span></p>
|
||
</div></section></article><article id="Element.click" class="Element-click-section"><header><h3 id="Element.click" 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 155 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L155">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.click-extra"></div><div class="dr-method"><p>Adds event handler for click for 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.clone" class="Element-clone-section"><header><h3 id="Element.clone" 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 1808 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1808">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.clone-extra"></div><div class="dr-method"><p>Creates 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.data" class="Element-data-section"><header><h3 id="Element.data" 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 2178 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2178">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.data-extra"></div><div class="dr-method"><p>Adds or retrieves given value asociated with given key.
|
||
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 optional">value</span>
|
||
<span class="dr-optional">optional</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.dblclick" class="Element-dblclick-section"><header><h3 id="Element.dblclick" 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 172 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L172">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.dblclick-extra"></div><div class="dr-method"><p>Adds event handler for double click for 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.drag" class="Element-drag-section"><header><h3 id="Element.drag" 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 454 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L454">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.drag-extra"></div><div class="dr-method"><p>Adds event handlers for drag 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">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 optional">mcontext</span>
|
||
<span class="dr-optional">optional</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 optional">scontext</span>
|
||
<span class="dr-optional">optional</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 optional">econtext</span>
|
||
<span class="dr-optional">optional</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 will be 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 will be dragged over another element
|
||
<code>drag.over.<id></code> will be fired as well.
|
||
</p>
|
||
<p>Start event and start handler will be 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><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><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>
|
||
</ol>
|
||
<p>Move event and move handler will be 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><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><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><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><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>
|
||
</ol>
|
||
<p>End event and end handler will be 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>
|
||
</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><div class="dr-method"><p>Adds event handlers for drag 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">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 optional">mcontext</span>
|
||
<span class="dr-optional">optional</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 optional">scontext</span>
|
||
<span class="dr-optional">optional</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 optional">econtext</span>
|
||
<span class="dr-optional">optional</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 will be 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 will be dragged over another element
|
||
<code>drag.over.<id></code> will be fired as well.
|
||
</p>
|
||
<p>Start event and start handler will be 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><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><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>
|
||
</ol>
|
||
<p>Move event and move handler will be 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><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><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><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><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>
|
||
</ol>
|
||
<p>End event and end handler will be 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>
|
||
</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.getBBox" class="Element-getBBox-section"><header><h3 id="Element.getBBox" 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 1512 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1512">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.getBBox-extra"></div><div class="dr-method"><p>Returns 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><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><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><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><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><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 the circle that will enclose the box,</span>
|
||
<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><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 biggest circle that can be enclosed,</span>
|
||
<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><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><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><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><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><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 right side,</span>
|
||
<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 left side</span>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Element.getPointAtLength" class="Element-getPointAtLength-section"><header><h3 id="Element.getPointAtLength" 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 1119 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1119">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.getPointAtLength-extra"></div><div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.
|
||
</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"> </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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Element.getSubpath" class="Element-getSubpath-section"><header><h3 id="Element.getSubpath" 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 1133 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1133">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.getSubpath-extra"></div><div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.
|
||
</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">position of 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">position of 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">pathstring for the segment</span></p>
|
||
</div></section></article><article id="Element.getTotalLength" class="Element-getTotalLength-section"><header><h3 id="Element.getTotalLength" 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 1099 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1099">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.getTotalLength-extra"></div><div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.
|
||
</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.hover" class="Element-hover-section"><header><h3 id="Element.hover" 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 372 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L372">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.hover-extra"></div><div class="dr-method"><p>Adds event handlers for hover for 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 optional">icontext</span>
|
||
<span class="dr-optional">optional</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 optional">ocontext</span>
|
||
<span class="dr-optional">optional</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.inAnim" class="Element-inAnim-section"><header><h3 id="Element.inAnim" 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 2029 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2029">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.inAnim-extra"></div><div class="dr-method"><p>Returns an array of animations element currently in
|
||
</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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Element.innerSVG" class="Element-innerSVG-section"><header><h3 id="Element.innerSVG" 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 2226 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2226">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.innerSVG-extra"></div><div class="dr-method"><p>Returns SVG code of the element. Equivalent to <code>innerHTML</code> in HTML context.
|
||
</p>
|
||
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code of the element.</span></p>
|
||
</div></section></article><article id="Element.insertAfter" class="Element-insertAfter-section"><header><h3 id="Element.insertAfter" 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 1707 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1707">➭</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">parent</span></p>
|
||
</div></section></article><article id="Element.insertBefore" class="Element-insertBefore-section"><header><h3 id="Element.insertBefore" 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 1692 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1692">➭</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">parent</span></p>
|
||
</div></section></article><article id="Element.marker" class="Element-marker-section"><header><h3 id="Element.marker" 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 1954 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1954">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.marker-extra"></div><div class="dr-method"><p>Creates <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"><code><marker></code> element</span></p>
|
||
<p>You can use pattern later on as an argument for <code>marker-start</code> or <code>marker-end</code> attributes.
|
||
</p>
|
||
</div></section></article><article id="Element.mousedown" class="Element-mousedown-section"><header><h3 id="Element.mousedown" 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 189 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L189">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.mousedown-extra"></div><div class="dr-method"><p>Adds event handler for mousedown for 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" class="Element-mousemove-section"><header><h3 id="Element.mousemove" 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 206 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L206">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.mousemove-extra"></div><div class="dr-method"><p>Adds event handler for mousemove for 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" class="Element-mouseout-section"><header><h3 id="Element.mouseout" 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 223 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L223">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.mouseout-extra"></div><div class="dr-method"><p>Adds event handler for mouseout for 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" class="Element-mouseover-section"><header><h3 id="Element.mouseover" 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 240 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L240">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.mouseover-extra"></div><div class="dr-method"><p>Adds event handler for mouseover for 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" class="Element-mouseup-section"><header><h3 id="Element.mouseup" 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 257 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L257">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.mouseup-extra"></div><div class="dr-method"><p>Adds event handler for mouseup for 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.parent" class="Element-parent-section"><header><h3 id="Element.parent" 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 1606 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1606">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.parent-extra"></div><div class="dr-method"><p>Returns parent of the element
|
||
</p>
|
||
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">parent</span></p>
|
||
</div></section></article><article id="Element.pattern" class="Element-pattern-section"><header><h3 id="Element.pattern" class="dr-method">Element.pattern(x, y, width, height)<a href="#Element.pattern" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 1915 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1915">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.pattern-extra"></div><div class="dr-method"><p>Creates <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"><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.prepend" class="Element-prepend-section"><header><h3 id="Element.prepend" 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 1646 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1646">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.prepend-extra"></div><div class="dr-method"><p>Prepends 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></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">parent</span></p>
|
||
</div></section></article><article id="Element.remove" class="Element-remove-section"><header><h3 id="Element.remove" 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 1720 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1720">➭</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">removed element</span></p>
|
||
</div></section></article><article id="Element.removeData" class="Element-removeData-section"><header><h3 id="Element.removeData" 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 2203 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2203">➭</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 optional">key</span>
|
||
<span class="dr-optional">optional</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.select" class="Element-select-section"><header><h3 id="Element.select" 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 1735 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1735">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.select-extra"></div><div class="dr-method"><p>Applies CSS selector with the element as a parent and returns the result as an <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</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" class="Element-selectAll-section"><header><h3 id="Element.selectAll" 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 1747 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1747">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.selectAll-extra"></div><div class="dr-method"><p>Applies CSS selector with the element as a parent and returns the result as a set or array of 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">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.stop" class="Element-stop-section"><header><h3 id="Element.stop" 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 2088 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2088">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.stop-extra"></div><div class="dr-method"><p>Stops all the animations of 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 element</span></p>
|
||
</div></section></article><article id="Element.toDefs" class="Element-toDefs-section"><header><h3 id="Element.toDefs" 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 1887 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1887">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.toDefs-extra"></div><div class="dr-method"><p>Moves element to the relative <code><defs></code> section.
|
||
</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.toString" class="Element-toString-section"><header><h3 id="Element.toString" 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 2911 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2911">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.toString-extra"></div><div class="dr-method"><p>Returns SVG code of the element. Equivalent to <code>outerHTML</code> in HTML context.
|
||
</p>
|
||
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code of the element.</span></p>
|
||
</div><div class="dr-method"><p>Returns SVG code of 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 of the <a href="#Paper" class="dr-link">Paper</a>.</span></p>
|
||
</div></section></article><article id="Element.touchcancel" class="Element-touchcancel-section"><header><h3 id="Element.touchcancel" 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 325 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L325">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.touchcancel-extra"></div><div class="dr-method"><p>Adds event handler for touchcancel for 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" class="Element-touchend-section"><header><h3 id="Element.touchend" 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 308 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L308">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.touchend-extra"></div><div class="dr-method"><p>Adds event handler for touchend for 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" class="Element-touchmove-section"><header><h3 id="Element.touchmove" 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 291 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L291">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.touchmove-extra"></div><div class="dr-method"><p>Adds event handler for touchmove for 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" class="Element-touchstart-section"><header><h3 id="Element.touchstart" 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 274 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L274">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.touchstart-extra"></div><div class="dr-method"><p>Adds event handler for touchstart for 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.transform" class="Element-transform-section"><header><h3 id="Element.transform" 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 1564 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1564">➭</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"></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><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><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><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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Element.unclick" class="Element-unclick-section"><header><h3 id="Element.unclick" 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 163 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L163">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.unclick-extra"></div><div class="dr-method"><p>Removes event handler for click for 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" class="Element-undblclick-section"><header><h3 id="Element.undblclick" 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 180 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L180">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.undblclick-extra"></div><div class="dr-method"><p>Removes event handler for double click for 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.undrag" class="Element-undrag-section"><header><h3 id="Element.undrag" 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 463 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L463">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.undrag-extra"></div><div class="dr-method"><p>Removes all drag event handlers from given element.
|
||
</p>
|
||
</div></section></article><article id="Element.unhover" class="Element-unhover-section"><header><h3 id="Element.unhover" 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 384 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L384">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.unhover-extra"></div><div class="dr-method"><p>Removes event handlers for hover for 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.unmousedown" class="Element-unmousedown-section"><header><h3 id="Element.unmousedown" 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 197 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L197">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.unmousedown-extra"></div><div class="dr-method"><p>Removes event handler for mousedown for 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" class="Element-unmousemove-section"><header><h3 id="Element.unmousemove" 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 214 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L214">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.unmousemove-extra"></div><div class="dr-method"><p>Removes event handler for mousemove for 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" class="Element-unmouseout-section"><header><h3 id="Element.unmouseout" 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 231 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L231">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.unmouseout-extra"></div><div class="dr-method"><p>Removes event handler for mouseout for 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" class="Element-unmouseover-section"><header><h3 id="Element.unmouseover" 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 248 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L248">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.unmouseover-extra"></div><div class="dr-method"><p>Removes event handler for mouseover for 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" class="Element-unmouseup-section"><header><h3 id="Element.unmouseup" 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 265 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L265">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.unmouseup-extra"></div><div class="dr-method"><p>Removes event handler for mouseup for 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" class="Element-untouchcancel-section"><header><h3 id="Element.untouchcancel" 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 333 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L333">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.untouchcancel-extra"></div><div class="dr-method"><p>Removes event handler for touchcancel for 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" class="Element-untouchend-section"><header><h3 id="Element.untouchend" 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 316 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L316">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.untouchend-extra"></div><div class="dr-method"><p>Removes event handler for touchend for 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" class="Element-untouchmove-section"><header><h3 id="Element.untouchmove" 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 299 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L299">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.untouchmove-extra"></div><div class="dr-method"><p>Removes event handler for touchmove for 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" class="Element-untouchstart-section"><header><h3 id="Element.untouchstart" 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 282 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L282">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.untouchstart-extra"></div><div class="dr-method"><p>Removes event handler for touchstart for 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.use" class="Element-use-section"><header><h3 id="Element.use" 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 1779 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1779">➭</a></h3></header>
|
||
<section><div class="extra" id="Element.use-extra"></div><div class="dr-method"><p>Creates <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"><code><use></code> element</span></p>
|
||
</div></section></article><article id="Fragment" class="Fragment-section"><header><h2 id="Fragment" class="undefined">Fragment<a href="#Fragment" title="Link to this section" class="dr-hash">⚓</a></h2></header>
|
||
<section><div class="extra" id="Fragment-extra"></div></section></article><article id="Fragment.select" class="Fragment-select-section"><header><h3 id="Fragment.select" 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 2295 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2295">➭</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" class="Fragment-selectAll-section"><header><h3 id="Fragment.selectAll" 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 2302 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2302">➭</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" class="Matrix-section"><header><h2 id="Matrix" class="undefined">Matrix<a href="#Matrix" title="Link to this section" class="dr-hash">⚓</a></h2></header>
|
||
<section><div class="extra" id="Matrix-extra"></div></section></article><article id="Matrix.add" class="Matrix-add-section"><header><h3 id="Matrix.add" 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 388 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L388">➭</a></h3></header>
|
||
<section><div class="extra" id="Matrix.add-extra"></div><div class="dr-method"><p>Adds 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.clone" class="Matrix-clone-section"><header><h3 id="Matrix.clone" 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 434 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L434">➭</a></h3></header>
|
||
<section><div class="extra" id="Matrix.clone-extra"></div><div class="dr-method"><p>Returns 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.invert" class="Matrix-invert-section"><header><h3 id="Matrix.invert" 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 422 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L422">➭</a></h3></header>
|
||
<section><div class="extra" id="Matrix.invert-extra"></div><div class="dr-method"><p>Returns 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.rotate" class="Matrix-rotate-section"><header><h3 id="Matrix.rotate" 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 474 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L474">➭</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"> </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"> </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>
|
||
</div></section></article><article id="Matrix.scale" class="Matrix-scale-section"><header><h3 id="Matrix.scale" 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 458 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L458">➭</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"> </span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">y</span>
|
||
<span class="dr-optional">optional</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 optional">cx</span>
|
||
<span class="dr-optional">optional</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 optional">cy</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-number">number</em></span>
|
||
<span class="dr-description"> </span></li>
|
||
</ol></div>
|
||
</div></section></article><article id="Matrix.split" class="Matrix-split-section"><header><h3 id="Matrix.split" 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 538 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L538">➭</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><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><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><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><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><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><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>
|
||
</ol>
|
||
</div></section></article><article id="Matrix.toTransformString" class="Matrix-toTransformString-section"><header><h3 id="Matrix.toTransformString" 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 580 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L580">➭</a></h3></header>
|
||
<section><div class="extra" id="Matrix.toTransformString-extra"></div><div class="dr-method"><p>Return 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="Matrix.translate" class="Matrix-translate-section"><header><h3 id="Matrix.translate" 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 445 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L445">➭</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"> </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>
|
||
</div></section></article><article id="Matrix.x" class="Matrix-x-section"><header><h3 id="Matrix.x" 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 492 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L492">➭</a></h3></header>
|
||
<section><div class="extra" id="Matrix.x-extra"></div><div class="dr-method"><p>Return 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" class="Matrix-y-section"><header><h3 id="Matrix.y" 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 504 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L504">➭</a></h3></header>
|
||
<section><div class="extra" id="Matrix.y-extra"></div><div class="dr-method"><p>Return 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="Paper" class="Paper-section"><header><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">⚓</a></h2></header>
|
||
<section><div class="extra" id="Paper-extra"></div></section></article><article id="Paper.circle" class="Paper-circle-section"><header><h3 id="Paper.circle" 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 2573 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2573">➭</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">Element object with type “circle”</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.el" class="Paper-el-section"><header><h3 id="Paper.el" 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 2513 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2513">➭</a></h3></header>
|
||
<section><div class="extra" id="Paper.el-extra"></div><div class="dr-method"><p>Creates 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 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
|
||
});
|
||
</code></pre></section>
|
||
</div></section></article><article id="Paper.ellipse" class="Paper-ellipse-section"><header><h3 id="Paper.ellipse" 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 2661 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2661">➭</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">Element object with type “ellipse”</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.filter" class="Paper-filter-section"><header><h3 id="Paper.filter" 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/savage/blob/master/src/filter.js#L36">➭</a></h3></header>
|
||
<section><div class="extra" id="Paper.filter-extra"></div><div class="dr-method"><p>Creates filter 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 page inside 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="Paper.g" class="Paper-g-section"><header><h3 id="Paper.g" 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 2735 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2735">➭</a></h3></header>
|
||
<section><div class="extra" id="Paper.g-extra"></div><div class="dr-method"><p>Makes 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 optional">varargs</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-…">…</em></span>
|
||
<span class="dr-description">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">Element object with type “g”</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 will be 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.gradient" class="Paper-gradient-section"><header><h3 id="Paper.gradient" 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 2895 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2895">➭</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>Gradient descriptor consists of <code><type>(<coords>)<colors></code>. Type
|
||
could be linear or radial, which presented as letter “L” or “R”. Any
|
||
type could be absolute or relative, absolute gradient take it coords
|
||
relative to the SVG surface, while relative takes them relative to
|
||
the bounding box of the element it applied to. For absolute
|
||
coordinates you specify type as an upper case letter (“L” or “R”).
|
||
For relative use low case letter (“l” or “r”). Coordinates specify
|
||
vector of gradient for linear as x1, y1, x2, y2. For radial as cx,
|
||
cy, r and optional fx, fy. Colors are list of dash separated colors.
|
||
Optionally color could have offset after colon.
|
||
</p>
|
||
<h3>Example</h3><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, 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, 100, 100)#000-#f00:25%-#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("r(0.5, 0.5, 0.5)#000-#fff");
|
||
</code></pre></section>
|
||
<p>Radial gradient, relative from the center of the element with radius
|
||
0.5 of the width, from black to white.
|
||
</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">Element object with type “gradient”</span></p>
|
||
</div></section></article><article id="Paper.group" class="Paper-group-section"><header><h3 id="Paper.group" 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 2741 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2741">➭</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.image" class="Paper-image-section"><header><h3 id="Paper.image" 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 2618 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2618">➭</a></h3></header>
|
||
<section><div class="extra" id="Paper.image-extra"></div><div class="dr-method"><p>Embeds an image into 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 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">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">Raphaël element object with type “image”</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><div class="dr-method"><p>Embeds an image into 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 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">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">Element object with type “image”</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.line" class="Paper-line-section"><header><h3 id="Paper.line" 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 2797 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2797">➭</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">Element object with type “line”</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.path" class="Paper-path-section"><header><h3 id="Paper.path" 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 2705 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2705">➭</a></h3></header>
|
||
<section><div class="extra" id="Paper.path-extra"></div><div class="dr-method"><p>Creates a path element by given path data 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 optional">pathString</span>
|
||
<span class="dr-optional">optional</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 numercal form. Example:
|
||
</p>
|
||
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">"M10,20L30,40"
|
||
</code></pre></section>
|
||
<p>Here we can see two commands: “M”, with arguments <code>(10, 20)</code> and “L” with arguments <code>(30, 40)</code>. Upper case letter mean command is absolute, lower case—relative.
|
||
</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>“Catmull-Rom curveto” is a not standard SVG command and added to make life easier.</li>
|
||
Note: there is a special case when path consist of just three commands: “M10,10R…z”. In this case path will smoothly connects to its beginning.
|
||
</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.polygon" class="Paper-polygon-section"><header><h3 id="Paper.polygon" 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 2846 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2846">➭</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.polyline" class="Paper-polyline-section"><header><h3 id="Paper.polyline" 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 2826 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2826">➭</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">Element object with type “text”</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.rect" class="Paper-rect-section"><header><h3 id="Paper.rect" 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 2536 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2536">➭</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 optional">rx</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-number">number</em></span>
|
||
<span class="dr-description">horisontal radius for rounded corners, default is 0</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">ry</span>
|
||
<span class="dr-optional">optional</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">Element object with type “rect”</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.text" class="Paper-text-section"><header><h3 id="Paper.text" 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 2769 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2769">➭</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 <tspan>s</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">Element object with type “text”</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"]);
|
||
</code></pre></section>
|
||
</div></section></article><article id="Paper.toString" class="Paper-toString-section"><header><h3 id="Paper.toString" 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 2911 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2911">➭</a></h3></header>
|
||
<section><div class="extra" id="Paper.toString-extra"></div><div class="dr-method"><p>Returns SVG code of the element. Equivalent to <code>outerHTML</code> in HTML context.
|
||
</p>
|
||
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code of the element.</span></p>
|
||
</div><div class="dr-method"><p>Returns SVG code of 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 of the <a href="#Paper" class="dr-link">Paper</a>.</span></p>
|
||
</div></section></article><article id="Set" class="Set-section"><header><h2 id="Set" class="undefined">Set<a href="#Set" title="Link to this section" class="dr-hash">⚓</a></h2></header>
|
||
<section><div class="extra" id="Set-extra"></div></section></article><article id="Set.clear" class="Set-clear-section"><header><h3 id="Set.clear" 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 96 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L96">➭</a></h3></header>
|
||
<section><div class="extra" id="Set.clear-extra"></div><div class="dr-method"><p>Removeds all elements from the set
|
||
</p>
|
||
</div></section></article><article id="Set.exclude" class="Set-exclude-section"><header><h3 id="Set.exclude" 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 147 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L147">➭</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 & removed from the set</span></p>
|
||
</div></section></article><article id="Set.forEach" class="Set-forEach-section"><header><h3 id="Set.forEach" 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 76 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L76">➭</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 function returns <code>false</code> it will stop loop 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.pop" class="Set-pop-section"><header><h3 id="Set.pop" 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 60 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L60">➭</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.push" class="Set-push-section"><header><h3 id="Set.push" 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 40 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L40">➭</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.splice" class="Set-splice-section"><header><h3 id="Set.splice" 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 112 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/set.js#L112">➭</a></h3></header>
|
||
<section><div class="extra" id="Set.splice-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">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 optional">insertion…</span>
|
||
<span class="dr-optional">optional</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="Snap" class="Snap-section"><header><h2 id="Snap" class="undefined">Snap<a href="#Snap" title="Link to this section" class="dr-hash">⚓</a></h2></header>
|
||
<section><div class="extra" id="Snap-extra"></div></section></article><article id="Snap.Matrix" class="Snap-Matrix-section"><header><h3 id="Snap.Matrix" 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 611 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L611">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.Matrix-extra"></div><div class="dr-method"><p>Utility method
|
||
Returns matrix based on 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="Snap.ajax" class="Snap-ajax-section"><header><h3 id="Snap.ajax" 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 2943 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2943">➭</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 optional">scope</span>
|
||
<span class="dr-optional">optional</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 optional">scope</span>
|
||
<span class="dr-optional">optional</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">XMLHttpRequest (just in case)</span></p>
|
||
</div></section></article><article id="Snap.angle" class="Snap-angle-section"><header><h3 id="Snap.angle" 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 305 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L305">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.angle-extra"></div><div class="dr-method"><p>Returns 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 optional">x3</span>
|
||
<span class="dr-optional">optional</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 optional">y3</span>
|
||
<span class="dr-optional">optional</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.animate" class="Snap-animate-section"><header><h3 id="Snap.animate" class="dr-method">Snap.animate(from, to, setter, ms, [easing], [callback])<a href="#Snap.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2070 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2070">➭</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 will take one number argument</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param">ms</span>
|
||
<span class="dr-type"><em class="dr-type-number">number</em></span>
|
||
<span class="dr-description">duration</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
|
||
<span class="dr-optional">optional</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 optional">callback</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-function">function</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">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><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><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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.animation" class="Snap-animation-section"><header><h3 id="Snap.animation" class="dr-method">Snap.animation(attr, ms, [easing], [callback])<a href="#Snap.animation" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2012 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2012">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.animation-extra"></div><div class="dr-method"><p>Creates 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">ms</span>
|
||
<span class="dr-type"><em class="dr-type-number">number</em></span>
|
||
<span class="dr-description">animation duration</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
|
||
<span class="dr-optional">optional</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 optional">callback</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-function">function</em></span>
|
||
<span class="dr-description">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">animation object</span></p>
|
||
</div></section></article><article id="Snap.color" class="Snap-color-section"><header><h3 id="Snap.color" 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 847 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L847">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.color-extra"></div><div class="dr-method"><p>Parses the color string and returns object with all values for the given 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">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 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><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><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><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><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 cant be parsed,</span>
|
||
<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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.deg" class="Snap-deg-section"><header><h3 id="Snap.deg" class="dr-method">Snap.deg(deg)<a href="#Snap.deg" 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/savage/blob/master/src/svg.js#L290">➭</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">deg</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.filter" class="Snap-filter-section"><header><h3 id="Snap.filter" class="undefined">Snap.filter<a href="#Snap.filter" title="Link to this section" class="dr-hash">⚓</a></h3></header>
|
||
<section><div class="extra" id="Snap.filter-extra"></div></section></article><article id="Snap.filter.blur" class="Snap-filter-blur-section"><header><h4 id="Snap.filter.blur" 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 100 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L100">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.blur-extra"></div><div class="dr-method"><p>Returns string of 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 horisontal blur in px.</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">y</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-number">number</em></span>
|
||
<span class="dr-description">amount of vertical blur in px.</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.brightness" class="Snap-filter-brightness-section"><header><h4 id="Snap.filter.brightness" 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 279 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L279">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.brightness-extra"></div><div class="dr-method"><p>Returns string of 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" class="Snap-filter-contrast-section"><header><h4 id="Snap.filter.contrast" 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 299 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L299">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.contrast-extra"></div><div class="dr-method"><p>Returns string of 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="Snap.filter.grayscale" class="Snap-filter-grayscale-section"><header><h4 id="Snap.filter.grayscale" 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 165 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L165">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.grayscale-extra"></div><div class="dr-method"><p>Returns string of 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.hueRotate" class="Snap-filter-hueRotate-section"><header><h4 id="Snap.filter.hueRotate" 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 240 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L240">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.hueRotate-extra"></div><div class="dr-method"><p>Returns string of 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" class="Snap-filter-invert-section"><header><h4 id="Snap.filter.invert" 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 258 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L258">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.invert-extra"></div><div class="dr-method"><p>Returns string of 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.saturate" class="Snap-filter-saturate-section"><header><h4 id="Snap.filter.saturate" 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 220 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L220">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.saturate-extra"></div><div class="dr-method"><p>Returns string of 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.sepia" class="Snap-filter-sepia-section"><header><h4 id="Snap.filter.sepia" 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 192 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L192">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.sepia-extra"></div><div class="dr-method"><p>Returns string of 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.shadow" class="Snap-filter-shadow-section"><header><h4 id="Snap.filter.shadow" class="dr-method">Snap.filter.shadow(dx, dy, [blur], [color])<a href="#Snap.filter.shadow" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 129 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L129">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.filter.shadow-extra"></div><div class="dr-method"><p>Returns string of 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">horisontal shift of the shadow in px.</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 px.</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">blur</span>
|
||
<span class="dr-optional">optional</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 optional">color</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-string">string</em></span>
|
||
<span class="dr-description">color 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.format" class="Snap-format-section"><header><h3 id="Snap.format" 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 173 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L173">➭</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 will be 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">formated string</span></p>
|
||
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">// this will draw 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.fragment" class="Snap-fragment-section"><header><h3 id="Snap.fragment" 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 2312 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2312">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.fragment-extra"></div><div class="dr-method"><p>Creates DOM fragment from 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="Snap.getRGB" class="Snap-getRGB-section"><header><h3 id="Snap.getRGB" class="dr-method">Snap.getRGB(colour)<a href="#Snap.getRGB" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 646 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L646">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.getRGB-extra"></div><div class="dr-method"><p>Parses colour 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">colour</span>
|
||
<span class="dr-type"><em class="dr-type-string">string</em></span>
|
||
<span class="dr-description">colour string in one of formats:</span></li>
|
||
</ol></div>
|
||
<ul>
|
||
<li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>
|
||
<li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>
|
||
<li>#•••••• — full length HTML colour: (“<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 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><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><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><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><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 cant be parsed</span>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.hsb" class="Snap-hsb-section"><header><h3 id="Snap.hsb" 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 734 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L734">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.hsb-extra"></div><div class="dr-method"><p>Converts HSB values to hex representation of the colour.
|
||
</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 colour.</span></p>
|
||
</div></section></article><article id="Snap.hsb2rgb" class="Snap-hsb2rgb-section"><header><h3 id="Snap.hsb2rgb" 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 899 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L899">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.hsb2rgb-extra"></div><div class="dr-method"><p>Converts HSB values to 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 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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.hsl" class="Snap-hsl-section"><header><h3 id="Snap.hsl" 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 747 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L747">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.hsl-extra"></div><div class="dr-method"><p>Converts HSL values to hex representation of the colour.
|
||
</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 colour.</span></p>
|
||
</div></section></article><article id="Snap.hsl2rgb" class="Snap-hsl2rgb-section"><header><h3 id="Snap.hsl2rgb" 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 935 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L935">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.hsl2rgb-extra"></div><div class="dr-method"><p>Converts HSL values to 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 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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.is" class="Snap-is-section"><header><h3 id="Snap.is" 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 315 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L315">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.is-extra"></div><div class="dr-method"><p>Handfull replacement for <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, i.e. “string”, “function”, “number”, 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">is given value is of given type</span></p>
|
||
</div></section></article><article id="Snap.load" class="Snap-load-section"><header><h3 id="Snap.load" 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 2989 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2989">➭</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>. For more advanced AJAX see <a href="#Snap.ajax" class="dr-link">Snap.ajax</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">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 optional">scope</span>
|
||
<span class="dr-optional">optional</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.parse" class="Snap-parse-section"><header><h3 id="Snap.parse" 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 2264 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2264">➭</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 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 fragment</span></p>
|
||
</div></section></article><article id="Snap.parsePathString" class="Snap-parsePathString-section"><header><h3 id="Snap.parsePathString" 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 1040 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1040">➭</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 will be 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" class="Snap-parseTransformString-section"><header><h3 id="Snap.parseTransformString" 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 1093 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1093">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.parseTransformString-extra"></div><div class="dr-method"><p>Utility method
|
||
Parses given path 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 will be 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.path" class="Snap-path-section"><header><h3 id="Snap.path" class="undefined">Snap.path<a href="#Snap.path" title="Link to this section" class="dr-hash">⚓</a></h3></header>
|
||
<section><div class="extra" id="Snap.path-extra"></div></section></article><article id="Snap.path.bezierBBox" class="Snap-path-bezierBBox-section"><header><h4 id="Snap.path.bezierBBox" 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 1206 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1206">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.path.bezierBBox-extra"></div><div class="dr-method"><p>Utility method
|
||
Return bounding box of a given cubic bezier 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 bezier 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">point information in format:</span></p>
|
||
<ol class="dr-json"><li>{<ol class="dr-json"><li> min: {<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 point</span>
|
||
<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 top point</span>
|
||
</ol></li><li> }</li><li> max: {<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 point</span>
|
||
<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 bottom point</span>
|
||
</ol></li><li> }</li></ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.path.findDotsAtSegment" class="Snap-path-findDotsAtSegment-section"><header><h4 id="Snap.path.findDotsAtSegment" 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 1176 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1176">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.path.findDotsAtSegment-extra"></div><div class="dr-method"><p>Utility method
|
||
Find dot coordinates on the given cubic bezier 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><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> 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><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>
|
||
</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><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>
|
||
</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><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>
|
||
</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><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>
|
||
</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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.path.getBBox" class="Snap-path-getBBox-section"><header><h4 id="Snap.path.getBBox" 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 1288 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1288">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.path.getBBox-extra"></div><div class="dr-method"><p>Utility method
|
||
Return 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><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><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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.path.getPointAtLength" class="Snap-path-getPointAtLength-section"><header><h4 id="Snap.path.getPointAtLength" 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 1072 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1072">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.path.getPointAtLength-extra"></div><div class="dr-method"><p>Return coordinates of the point located at the given length on 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"> </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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.path.getSubpath" class="Snap-path-getSubpath-section"><header><h4 id="Snap.path.getSubpath" 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 1085 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1085">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.path.getSubpath-extra"></div><div class="dr-method"><p>Return subpath of a given path from given length to given length.
|
||
</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">position of 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">position of 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">pathstring for the segment</span></p>
|
||
</div></section></article><article id="Snap.path.getTotalLength" class="Snap-path-getTotalLength-section"><header><h4 id="Snap.path.getTotalLength" 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 1055 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1055">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.path.getTotalLength-extra"></div><div class="dr-method"><p>Returns 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.intersection" class="Snap-path-intersection-section"><header><h4 id="Snap.path.intersection" 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 1255 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1255">➭</a></h4></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> {<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><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><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><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><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><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><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><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>
|
||
</ol></li><li> }</li><li>]</ol>
|
||
</div></section></article><article id="Snap.path.isBBoxIntersect" class="Snap-path-isBBoxIntersect-section"><header><h4 id="Snap.path.isBBoxIntersect" 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 1231 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1231">➭</a></h4></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 they intersect</span></p>
|
||
</div></section></article><article id="Snap.path.isPointInside" class="Snap-path-isPointInside-section"><header><h4 id="Snap.path.isPointInside" 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 1269 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1269">➭</a></h4></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>
|
||
<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">true, if point is inside the path</span></p>
|
||
</div></section></article><article id="Snap.path.isPointInsideBBox" class="Snap-path-isPointInsideBBox-section"><header><h4 id="Snap.path.isPointInsideBBox" 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 1219 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1219">➭</a></h4></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 inside</span></p>
|
||
</div></section></article><article id="Snap.path.map" class="Snap-path-map-section"><header><h4 id="Snap.path.map" 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 1332 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1332">➭</a></h4></header>
|
||
<section><div class="extra" id="Snap.path.map-extra"></div><div class="dr-method"><p>Transform the path string with 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="Snap.path.toAbsolute" class="Snap-path-toAbsolute-section"><header><h4 id="Snap.path.toAbsolute" 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 1311 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1311">➭</a></h4></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" class="Snap-path-toCubic-section"><header><h4 id="Snap.path.toCubic" 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 1322 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1322">➭</a></h4></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 bezier 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.toRelative" class="Snap-path-toRelative-section"><header><h4 id="Snap.path.toRelative" 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 1300 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1300">➭</a></h4></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.rad" class="Snap-rad-section"><header><h3 id="Snap.rad" 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 281 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L281">➭</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.rgb" class="Snap-rgb-section"><header><h3 id="Snap.rgb" 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 760 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L760">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.rgb-extra"></div><div class="dr-method"><p>Converts RGB values to hex representation of the colour.
|
||
</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 colour.</span></p>
|
||
</div></section></article><article id="Snap.rgb2hsb" class="Snap-rgb2hsb-section"><header><h3 id="Snap.rgb2hsb" 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 974 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L974">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.rgb2hsb-extra"></div><div class="dr-method"><p>Converts RGB values to 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 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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.rgb2hsl" class="Snap-rgb2hsl-section"><header><h3 id="Snap.rgb2hsl" 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 1007 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1007">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.rgb2hsl-extra"></div><div class="dr-method"><p>Converts RGB values to 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 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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="Snap.select" class="Snap-select-section"><header><h3 id="Snap.select" 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 1359 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1359">➭</a></h3></header>
|
||
<section><div class="extra" id="Snap.select-extra"></div><div class="dr-method"><p>Wraps 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"></span></p>
|
||
</div></section></article><article id="Snap.selectAll" class="Snap-selectAll-section"><header><h3 id="Snap.selectAll" 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 1370 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1370">➭</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"></span></p>
|
||
</div></section></article><article id="Snap.snapTo" class="Snap-snapTo-section"><header><h3 id="Snap.snapTo" 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 326 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L326">➭</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 optional">tolerance</span>
|
||
<span class="dr-optional">optional</span>
|
||
<span class="dr-type"><em class="dr-type-number">number</em></span>
|
||
<span class="dr-description">tolerance for snapping. 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="mina" class="mina-section"><header><h2 id="mina" 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 156 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L156">➭</a></h2></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 “slave” 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 “slave” 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 “master” number (start time in gereal 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 “master” 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 “master” 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 “slave” number</span></li>
|
||
<li class="topcoat-list__item"><span class="dr-param optional">easing</span>
|
||
<span class="dr-optional">optional</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><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 “slave” number,</span>
|
||
<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 “slave” number,</span>
|
||
<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 “master” number,</span>
|
||
<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><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><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><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 “master” number (see <a href="#mina.time" class="dr-link">mina.time</a>),</span>
|
||
<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 “slave” number,</span>
|
||
<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><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><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><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><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>
|
||
</ol></li><li>}</li></ol>
|
||
</div></section></article><article id="mina.backin" class="mina-backin-section"><header><h3 id="mina.backin" 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 273 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L273">➭</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" class="mina-backout-section"><header><h3 id="mina.backout" 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 288 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L288">➭</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.bounce" class="mina-bounce-section"><header><h3 id="mina.bounce" 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 319 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L319">➭</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="mina.easein" class="mina-easein-section"><header><h3 id="mina.easein" 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 238 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L238">➭</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" class="mina-easeinout-section"><header><h3 id="mina.easeinout" 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 249 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L249">➭</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.easeout" class="mina-easeout-section"><header><h3 id="mina.easeout" 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 227 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L227">➭</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.elastic" class="mina-elastic-section"><header><h3 id="mina.elastic" 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 304 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L304">➭</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.getById" class="mina-getById-section"><header><h3 id="mina.getById" 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 204 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L204">➭</a></h3></header>
|
||
<section><div class="extra" id="mina.getById-extra"></div><div class="dr-method"><p>Returns animation by it’s 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" class="mina-linear-section"><header><h3 id="mina.linear" 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 216 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L216">➭</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.time" class="mina-time-section"><header><h3 id="mina.time" 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 195 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mina.js#L195">➭</a></h3></header>
|
||
<section><div class="extra" id="mina.time-extra"></div><div class="dr-method"><p>Returns current time. Equal 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></div>
|
||
<footer></footer>
|
||
</div>
|
||
</div>
|
||
<script src="//use.edgefonts.net/source-sans-pro:n3,n4,n6;source-code-pro:n3.js"></script>
|
||
<script src="js/prism.js"></script>
|
||
<script src="snap.svg-min.js"></script>
|
||
<script src="reference.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> |