forked from adobe-webplatform/Snap.svg
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreference.html
2080 lines (2080 loc) · 238 KB
/
reference.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!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.clear" class="dr-method"><span>Paper.clear()</span></a></li><li class="dr-lvl1"><a href="#Paper.el" class="dr-method"><span>Paper.el()</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.filter" class="dr-method"><span>Paper.filter()</span></a></li><li class="dr-lvl1"><a href="#Paper.g" class="dr-method"><span>Paper.g()</span></a></li><li class="dr-lvl1"><a href="#Paper.gradient" class="dr-method"><span>Paper.gradient()</span></a></li><li class="dr-lvl1"><a href="#Paper.group" class="dr-method"><span>Paper.group()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.line" class="dr-method"><span>Paper.line()</span></a></li><li class="dr-lvl1"><a href="#Paper.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="dr-method"><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 1633 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1633">➭</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 1686 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1686">➭</a></h3></header>
<section><div class="extra" id="Element.after-extra"></div><div class="dr-method"><p>Inserts given element after the current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element to insert</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.animate" class="Element-animate-section"><header><h3 id="Element.animate" class="dr-method">Element.animate(attrs, duration, [easing], [callback])<a href="#Element.animate" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2133 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2133">➭</a></h3></header>
<section><div class="extra" id="Element.animate-extra"></div><div class="dr-method"><p>Animates the given attributes of the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attrs</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">key-value pairs of destination attributes</span></li>
<li class="topcoat-list__item"><span class="dr-param">duration</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">duration of the animation in milliseconds</span></li>
<li class="topcoat-list__item"><span class="dr-param 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">callback function that executes when the animation ends</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
</div></section></article><article id="Element.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 1627 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1627">➭</a></h3></header>
<section><div class="extra" id="Element.append-extra"></div><div class="dr-method"><p>Appends the given element to current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em> <em class="dr-type-Set">Set</em></span>
<span class="dr-description">element to append</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.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 1774 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1774">➭</a></h3></header>
<section><div class="extra" id="Element.asPX-extra"></div><div class="dr-method"><p>Returns given attribute of the element as a <code>px</code> value (not %, em, etc.)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">attr</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">attribute name</span></li>
<li class="topcoat-list__item"><span class="dr-param 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 1466 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1466">➭</a></h3></header>
<section><div class="extra" id="Element.attr-extra"></div><div class="dr-method"><p>Gets or sets given attributes of the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">params</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">contains key-value pairs of attributes you want to set</span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">param</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">name of the attribute</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
<p>or
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">value of attribute</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">el.attr({
fill: "#fc0",
stroke: "#000",
strokeWidth: 2, // CamelCase...
"fill-opacity": 0.5 // or dash-separated names
});
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 1670 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1670">➭</a></h3></header>
<section><div class="extra" id="Element.before-extra"></div><div class="dr-method"><p>Inserts given element before the current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element to insert</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.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 a click event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 1818 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1818">➭</a></h3></header>
<section><div class="extra" id="Element.clone-extra"></div><div class="dr-method"><p>Creates a clone of the element and inserts it after the element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the clone</span></p>
</div></section></article><article id="Element.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 2205 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2205">➭</a></h3></header>
<section><div class="extra" id="Element.data-extra"></div><div class="dr-method"><p>Adds or retrieves given value associated with given key. (Don’t confuse
with <code>data-</code> attributes)
</p>
<p>See also <a href="#Element.removeData" class="dr-link">Element.removeData</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">key</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">key to store data</span></li>
<li class="topcoat-list__item"><span class="dr-param 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 a double click event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 459 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L459">➭</a></h3></header>
<section><div class="extra" id="Element.drag-extra"></div><div class="dr-method"><p>Adds event handlers for an element's drag gesture
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">onmove</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for moving</span></li>
<li class="topcoat-list__item"><span class="dr-param">onstart</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag start</span></li>
<li class="topcoat-list__item"><span class="dr-param">onend</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag end</span></li>
<li class="topcoat-list__item"><span class="dr-param 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 are triggered: <code>drag.start.<id></code> on start,
<code>drag.end.<id></code> on end and <code>drag.move.<id></code> on every move. When element is dragged over another element
<code>drag.over.<id></code> fires as well.
</p>
<p>Start event and start handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
<li><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 are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by x from the start point</span>
<li><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 are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</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 an element's drag gesture
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">onmove</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for moving</span></li>
<li class="topcoat-list__item"><span class="dr-param">onstart</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag start</span></li>
<li class="topcoat-list__item"><span class="dr-param">onend</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for drag end</span></li>
<li class="topcoat-list__item"><span class="dr-param 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 are triggered: <code>drag.start.<id></code> on start,
<code>drag.end.<id></code> on end and <code>drag.move.<id></code> on every move. When element is dragged over another element
<code>drag.over.<id></code> fires as well.
</p>
<p>Start event and start handler are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
<li><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 are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by x from the start point</span>
<li><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 are called in specified context or in context of the element with following parameters:
</p>
<ol class="dr-json"><li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
</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 1515 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1515">➭</a></h3></header>
<section><div class="extra" id="Element.getBBox-extra"></div><div class="dr-method"><p>Returns the bounding box descriptor for the given element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">bounding box descriptor:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">cx:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x of the center,</span>
<li><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 a circle that fully encloses 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 largest 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 bottom edge,</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 top edge</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 1126 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1126">➭</a></h3></header>
<section><div class="extra" id="Element.getPointAtLength-extra"></div><div class="dr-method"><p>Returns coordinates of the point located at the given length on the given path (only works for <code>path</code> elements)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">length</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path, excluding non-rendering jumps</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate,</span>
<li><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 1141 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1141">➭</a></h3></header>
<section><div class="extra" id="Element.getSubpath-extra"></div><div class="dr-method"><p>Returns subpath of a given element from given start and end lengths (only works for <code>path</code> elements)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">from</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path to the start of the segment</span></li>
<li class="topcoat-list__item"><span class="dr-param">to</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">length, in pixels, from the start of the path to the end of the segment</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">path string definition for the segment</span></p>
</div></section></article><article id="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 1105 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/path.js#L1105">➭</a></h3></header>
<section><div class="extra" id="Element.getTotalLength-extra"></div><div class="dr-method"><p>Returns the length of the path in pixels (only works for <code>path</code> elements)
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length</span></p>
</div></section></article><article id="Element.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 hover event handlers to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">f_in</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover in</span></li>
<li class="topcoat-list__item"><span class="dr-param">f_out</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover out</span></li>
<li class="topcoat-list__item"><span class="dr-param 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 2045 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2045">➭</a></h3></header>
<section><div class="extra" id="Element.inAnim-extra"></div><div class="dr-method"><p>Returns a set of animations that may be able to manipulate the current element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">in format:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">anim</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">animation object,</span>
<li><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 2254 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2254">➭</a></h3></header>
<section><div class="extra" id="Element.innerSVG-extra"></div><div class="dr-method"><p>Returns SVG code for the element's contents, equivalent to HTML's <code>innerHTML</code>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the element</span></p>
</div></section></article><article id="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 1716 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1716">➭</a></h3></header>
<section><div class="extra" id="Element.insertAfter-extra"></div><div class="dr-method"><p>Inserts the element after the given one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element next to whom insert to</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.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 1701 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1701">➭</a></h3></header>
<section><div class="extra" id="Element.insertBefore-extra"></div><div class="dr-method"><p>Inserts the element after the given one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element next to whom insert to</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.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 1969 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1969">➭</a></h3></header>
<section><div class="extra" id="Element.marker-extra"></div><div class="dr-method"><p>Creates a <code><marker></code> element from the current element
To create a marker you have to specify the bounding rect and reference point:
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">refX</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">refY</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the <code><marker></code> element</span></p>
<p>You can specify the marker later as an argument for <code>marker-start</code>, <code>marker-end</code>, <code>marker-mid</code>, and <code>marker</code> attributes. The <code>marker</code> attribute places the marker at every point along the path, and <code>marker-mid</code> places them at every point except the start and end.
</p>
</div></section></article><article id="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 a mousedown event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mousemove event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mouseout event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mouseover event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mouseup event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 1615 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1615">➭</a></h3></header>
<section><div class="extra" id="Element.parent-extra"></div><div class="dr-method"><p>Returns the element's parent
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.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 1928 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1928">➭</a></h3></header>
<section><div class="extra" id="Element.pattern-extra"></div><div class="dr-method"><p>Creates a <code><pattern></code> element from the current element
To create a pattern you have to specify the pattern rect:
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-string">string</em> <em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the <code><pattern></code> element</span></p>
<p>You can use pattern later on as an argument for <code>fill</code> attribute:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var p = paper.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 5
}).pattern(0, 0, 10, 10),
c = paper.circle(200, 200, 100);
c.attr({
fill: p
});
</code></pre></section>
</div></section></article><article id="Element.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 1655 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1655">➭</a></h3></header>
<section><div class="extra" id="Element.prepend-extra"></div><div class="dr-method"><p>Prepends the given element to the current one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">el</span>
<span class="dr-type"><em class="dr-type-Element">Element</em></span>
<span class="dr-description">element to prepend</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the parent element</span></p>
</div></section></article><article id="Element.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 1729 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1729">➭</a></h3></header>
<section><div class="extra" id="Element.remove-extra"></div><div class="dr-method"><p>Removes element from the DOM
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the detached element</span></p>
</div></section></article><article id="Element.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 2230 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2230">➭</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 1744 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1744">➭</a></h3></header>
<section><div class="extra" id="Element.select-extra"></div><div class="dr-method"><p>Gathers the nested <a href="#Element" class="dr-link">Element</a> matching the given set of CSS selectors
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">CSS selector</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">result of query selection</span></p>
</div></section></article><article id="Element.selectAll" 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 1756 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1756">➭</a></h3></header>
<section><div class="extra" id="Element.selectAll-extra"></div><div class="dr-method"><p>Gathers nested <a href="#Element" class="dr-link">Element</a> objects matching the given set of CSS selectors
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">query</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">CSS selector</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Set">Set</em> <em class="dr-type-array">array</em> <span class="dr-description">result of query selection</span></p>
</div></section></article><article id="Element.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 2112 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2112">➭</a></h3></header>
<section><div class="extra" id="Element.stop-extra"></div><div class="dr-method"><p>Stops all the animations for the current element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
</div></section></article><article id="Element.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 1898 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1898">➭</a></h3></header>
<section><div class="extra" id="Element.toDefs-extra"></div><div class="dr-method"><p>Moves element to the shared <code><defs></code> area
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the 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 2934 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2934">➭</a></h3></header>
<section><div class="extra" id="Element.toString-extra"></div><div class="dr-method"><p>Returns SVG code for the element, equivalent to HTML's <code>outerHTML</code>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the element</span></p>
</div><div class="dr-method"><p>Returns SVG code for the <a href="#Paper" class="dr-link">Paper</a>
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">SVG code for the <a href="#Paper" class="dr-link">Paper</a></span></p>
</div></section></article><article id="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 a touchcancel event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a touchend event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a touchmove event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a touchstart event handler to the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 1570 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1570">➭</a></h3></header>
<section><div class="extra" id="Element.transform-extra"></div><div class="dr-method"><p>Gets or sets transformation of the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">tstr</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">transform string in Snap or SVG format</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
<p>or
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">transformation descriptor:</span></p>
<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">string</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">transform string,</span>
<li><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 a click event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a double click event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 468 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/mouse.js#L468">➭</a></h3></header>
<section><div class="extra" id="Element.undrag-extra"></div><div class="dr-method"><p>Removes all drag event handlers from the given element
</p>
</div></section></article><article id="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 hover event handlers from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">f_in</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover in</span></li>
<li class="topcoat-list__item"><span class="dr-param">f_out</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for hover out</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mousedown event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mousemove event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mouseout event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mouseover event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a mouseup event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a touchcancel event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a touchend event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a touchmove event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 a touchstart event handler from the element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">handler</span>
<span class="dr-type"><em class="dr-type-function">function</em></span>
<span class="dr-description">handler for the event</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
</div></section></article><article id="Element.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 1789 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L1789">➭</a></h3></header>
<section><div class="extra" id="Element.use-extra"></div><div class="dr-method"><p>Creates a <code><use></code> element linked to the current element
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the <code><use></code> element</span></p>
</div></section></article><article id="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 2324 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2324">➭</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 2331 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2331">➭</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 390 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L390">➭</a></h3></header>
<section><div class="extra" id="Matrix.add-extra"></div><div class="dr-method"><p>Adds the given matrix to existing one
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">a</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">b</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">c</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">d</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">e</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">f</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
</ol></div>
<p>or
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">matrix</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></li>
</ol></div>
</div></section></article><article id="Matrix.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 436 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L436">➭</a></h3></header>
<section><div class="extra" id="Matrix.clone-extra"></div><div class="dr-method"><p>Returns a copy of the matrix
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
</div></section></article><article id="Matrix.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 424 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L424">➭</a></h3></header>
<section><div class="extra" id="Matrix.invert-extra"></div><div class="dr-method"><p>Returns an inverted version of the matrix
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
</div></section></article><article id="Matrix.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 477 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L477">➭</a></h3></header>
<section><div class="extra" id="Matrix.rotate-extra"></div><div class="dr-method"><p>Rotates the matrix
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">a</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">angle of rotation, in degrees</span></li>
<li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal origin point from which to rotate</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical origin point from which to rotate</span></li>
</ol></div>
</div></section></article><article id="Matrix.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 461 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L461">➭</a></h3></header>
<section><div class="extra" id="Matrix.scale-extra"></div><div class="dr-method"><p>Scales the matrix
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">amount to be scaled, with <code>1</code> resulting in no change</span></li>
<li class="topcoat-list__item"><span class="dr-param 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 to scale along the vertical axis. (Otherwise <code>x</code> applies to both axes.)</span></li>
<li class="topcoat-list__item"><span class="dr-param 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">horizontal origin point from which to scale</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">vertical origin point from which to scale</span></li>
</ol></div>
<p>Default cx, cy is the middle point of the element.
</p>
</div></section></article><article id="Matrix.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 544 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L544">➭</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 587 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L587">➭</a></h3></header>
<section><div class="extra" id="Matrix.toTransformString-extra"></div><div class="dr-method"><p>Returns transform string that represents given matrix
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">transform string</span></p>
</div></section></article><article id="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 447 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L447">➭</a></h3></header>
<section><div class="extra" id="Matrix.translate-extra"></div><div class="dr-method"><p>Translate the matrix
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal offset distance</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical offset distance</span></li>
</ol></div>
</div></section></article><article id="Matrix.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 495 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L495">➭</a></h3></header>
<section><div class="extra" id="Matrix.x-extra"></div><div class="dr-method"><p>Returns x coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.y" class="dr-link">Matrix.y</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">x</span></p>
</div></section></article><article id="Matrix.y" 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 507 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L507">➭</a></h3></header>
<section><div class="extra" id="Matrix.y-extra"></div><div class="dr-method"><p>Returns y coordinate for given point after transformation described by the matrix. See also <a href="#Matrix.x" class="dr-link">Matrix.x</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description"> </span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">y</span></p>
</div></section></article><article id="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 2603 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2603">➭</a></h3></header>
<section><div class="extra" id="Paper.circle-extra"></div><div class="dr-method"><p>Draws a circle
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">r</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">radius</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>circle</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(50, 50, 40);
</code></pre></section>
</div></section></article><article id="Paper.clear" class="Paper-clear-section"><header><h3 id="Paper.clear" class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">⚓</a><a class="dr-sourceline" title="Go to line 2952 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2952">➭</a></h3></header>
<section><div class="extra" id="Paper.clear-extra"></div><div class="dr-method"><p>Removes all child nodes of the paper, except <defs>.
</p>
</div></section></article><article id="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 2543 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2543">➭</a></h3></header>
<section><div class="extra" id="Paper.el-extra"></div><div class="dr-method"><p>Creates an element on paper with a given name and no attributes
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">name</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">tag name</span></li>
<li class="topcoat-list__item"><span class="dr-param">attr</span>
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">attributes</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the current element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.circle(10, 10, 10); // is the same as...
var c = paper.el("circle").attr({
cx: 10,
cy: 10,
r: 10
});
</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 2678 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2678">➭</a></h3></header>
<section><div class="extra" id="Paper.ellipse-extra"></div><div class="dr-method"><p>Draws an ellipse
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate of the centre</span></li>
<li class="topcoat-list__item"><span class="dr-param">rx</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">horizontal radius</span></li>
<li class="topcoat-list__item"><span class="dr-param">ry</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">vertical radius</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>ellipse</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.ellipse(50, 50, 40, 20);
</code></pre></section>
</div></section></article><article id="Paper.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 37 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/filter.js#L37">➭</a></h3></header>
<section><div class="extra" id="Paper.filter-extra"></div><div class="dr-method"><p>Creates a <code><filter></code> element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">filstr</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">SVG fragment of filter provided as a string</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
<p>Note: It is recommended to use filters embedded into the page inside an empty SVG element.
</p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var f = paper.filter('<feGaussianBlur stdDeviation="2"/>'),
c = paper.circle(10, 10, 10).attr({
filter: f
});
</code></pre></section>
</div></section></article><article id="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 2754 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2754">➭</a></h3></header>
<section><div class="extra" id="Paper.g-extra"></div><div class="dr-method"><p>Creates a group element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param optional">varargs</span>
<span class="dr-optional">optional</span>
<span class="dr-type"><em class="dr-type-…">…</em></span>
<span class="dr-description">elements to nest within the group</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>g</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c1 = paper.circle(),
c2 = paper.rect(),
g = paper.g(c2, c1); // note that the order of elements is different
</code></pre></section>
<p>or
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c1 = paper.circle(),
c2 = paper.rect(),
g = paper.g();
g.add(c2, c1);
</code></pre></section>
</div></section></article><article id="Paper.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 2918 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2918">➭</a></h3></header>
<section><div class="extra" id="Paper.gradient-extra"></div><div class="dr-method"><p>Creates a gradient element
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">gradient</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">gradient descriptor</span></li>
</ol></div>
<h3>Gradient Descriptor</h3><p>The gradient descriptor is an expression formatted as
follows: <code><type>(<coords>)<colors></code>. The <code><type></code> can be
either linear or radial. The uppercase <code>L</code> or <code>R</code> letters
indicate absolute coordinates offset from the SVG surface.
Lowercase <code>l</code> or <code>r</code> letters indicate coordinates
calculated relative to the element to which the gradient is
applied. Coordinates specify a linear gradient vector as
<code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code>, or a radial gradient as <code>cx</code>, <code>cy</code>,
<code>r</code> and optional <code>fx</code>, <code>fy</code> specifying a focal point away
from the center of the circle. Specify <code><colors></code> as a list
of dash-separated CSS color values. Each color may be
followed by a custom offset value, separated with a colon
character.
</p>
<h3>Examples</h3><p>Linear gradient, relative from top-left corner to bottom-right
corner, from black through red to white:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("l(0, 0, 1, 1)#000-#f00-#fff");
</code></pre></section>
<p>Linear gradient, absolute from (0, 0) to (100, 100), from black
through red at 25% to white:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("L(0, 0, 100, 100)#000-#f00:25%-#fff");
</code></pre></section>
<p>Radial gradient, relative from the center of the element with radius
half the width, from black to white:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var g = paper.gradient("r(0.5, 0.5, 0.5)#000-#fff");
</code></pre></section>
<p>To apply the gradient:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">paper.circle(50, 50, 40).attr({
fill: g
});
</code></pre></section>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>gradient</code> element</span></p>
</div></section></article><article id="Paper.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 2760 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2760">➭</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 2635 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2635">➭</a></h3></header>
<section><div class="extra" id="Paper.image-extra"></div><div class="dr-method"><p>Places an image on the surface
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">src</span>
<span class="dr-type"><em class="dr-type-string">string</em></span>
<span class="dr-description">URI of the source image</span></li>
<li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x offset position</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y offset position</span></li>
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">width of the image</span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">height of the image</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>image</code> element</span></p>
<p>or
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object with type <code>image</code></span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var c = paper.image("apple.png", 10, 10, 80, 80);
</code></pre></section>
</div></section></article><article id="Paper.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 2816 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2816">➭</a></h3></header>
<section><div class="extra" id="Paper.line-extra"></div><div class="dr-method"><p>Draws a line
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x1</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate position of the start</span></li>
<li class="topcoat-list__item"><span class="dr-param">y1</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate position of the start</span></li>
<li class="topcoat-list__item"><span class="dr-param">x2</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">x coordinate position of the end</span></li>
<li class="topcoat-list__item"><span class="dr-param">y2</span>
<span class="dr-type"><em class="dr-type-number">number</em></span>
<span class="dr-description">y coordinate position of the end</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">the <code>line</code> element</span></p>
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.line(50, 50, 100, 100);
</code></pre></section>
</div></section></article><article id="Paper.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 2723 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2723">➭</a></h3></header>
<section><div class="extra" id="Paper.path-extra"></div><div class="dr-method"><p>Creates a <code><path></code> element using the given string as the path's definition
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param 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 numerical form. Example:
</p>
<section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">"M10,20L30,40"
</code></pre></section>
<p>This example features two commands: <code>M</code>, with arguments <code>(10, 20)</code> and <code>L</code> with arguments <code>(30, 40)</code>. Uppercase letter commands express coordinates in absolute terms, while lowercase commands express them in relative terms from the most recently declared coordinates.
</p>
<p></p>
<p>Here is short list of commands available, for more details see <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a> or <a href="https://developer.mozilla.org/en/SVG/Tutorial/Paths">article about path strings at MDN</a>.</p>
<table><thead><tr><th>Command</th><th>Name</th><th>Parameters</th></tr></thead><tbody>
<tr><td>M</td><td>moveto</td><td>(x y)+</td></tr>
<tr><td>Z</td><td>closepath</td><td>(none)</td></tr>
<tr><td>L</td><td>lineto</td><td>(x y)+</td></tr>
<tr><td>H</td><td>horizontal lineto</td><td>x+</td></tr>
<tr><td>V</td><td>vertical lineto</td><td>y+</td></tr>
<tr><td>C</td><td>curveto</td><td>(x1 y1 x2 y2 x y)+</td></tr>
<tr><td>S</td><td>smooth curveto</td><td>(x2 y2 x y)+</td></tr>
<tr><td>Q</td><td>quadratic Bézier curveto</td><td>(x1 y1 x y)+</td></tr>
<tr><td>T</td><td>smooth quadratic Bézier curveto</td><td>(x y)+</td></tr>
<tr><td>A</td><td>elliptical arc</td><td>(rx ry x-axis-rotation large-arc-flag sweep-flag x y)+</td></tr>
<tr><td>R</td><td><a href="http://en.wikipedia.org/wiki/Catmull–Rom_spline#Catmull.E2.80.93Rom_spline">Catmull-Rom curveto</a>*</td><td>x1 y1 (x y)+</td></tr></tbody></table>
<p><li><em>Catmull-Rom curveto</em> is a not standard SVG command and added to make life easier.</li>