zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix for bug #35 & #36

master
Dmitry Baranovskiy 2013-10-15 12:32:49 +11:00
parent f384675b82
commit ba58eb1fdd
5 changed files with 255 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
demo.html
View File

@ -84,9 +84,9 @@
cx: f.select("#pie-chart circle").attr("cx"),
cy: f.select("#pie-chart circle").attr("cy"),
r: f.select("#pie-chart circle").attr("r"),
coffee: f.select("#legend text tspan"),
title: f.selectAll("#legend text")[1],
water: f.select("#legend text tspan:nth-child(2)"),
coffee: f.select("#legend text"),
water: f.selectAll("#legend text")[1],
title: f.selectAll("#legend text")[2],
waterBox: f.select("#legend rect:nth-child(2)")
},
angle = 0,
@ -142,7 +142,7 @@
}, 1000, mina.elastic, function () {
angle = (a + 1080) % 360;
closeCup(function () {
types[a]();
types[angle]();
pour();
pieShow();
});

385
demo.svg
View File

@ -1,17 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px"
height="800px" viewBox="0 0 1000 800" enable-background="new 0 0 1000 800" xml:space="preserve">
<g id="Layer_1">
<path fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M919,226.5c0,6.627-5.373,12-12,12H691
c-6.627,0-12-5.373-12-12v-144c0-6.627,5.373-12,12-12h216c6.627,0,12,5.373,12,12V226.5z"/>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1000px" height="800px" viewBox="0 0 1000 800" enable-background="new 0 0 1000 800" xml:space="preserve">
<g id="Layer_1_1_">
<g>
<polygon fill="#FFFFFF" points="358,707.5 358,686.086 418,626.086 418,303.5 580,303.5 580,626.086 640,686.086 640,707.5 "/>
<path fill="#60544F" d="M579,304.5v322l60,60v20H359v-20l60-60v-322H579 M581,302.5h-2H419h-2v2v321.172l-59.414,59.414
L357,685.672v0.828v20v2h2h280h2v-2v-20v-0.828l-0.586-0.586L581,625.672V304.5V302.5L581,302.5z"/>
</g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100.5" y1="866.5" x2="100.5" y2="263.5">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="121.5" y1="-63" x2="121.5" y2="540" gradientTransform="matrix(1 0 0 -1 -21 803.5)">
<stop offset="0" style="stop-color:#E1DAD5"/>
<stop offset="0.3204" style="stop-color:#FFFFFF"/>
</linearGradient>
@ -21,26 +20,12 @@
c0-11.046-31.34-20-70-20s-70,8.954-70,20C59,452.023,66.835,457.023,79.503,460.642z"/>
<ellipse display="none" fill="#999999" cx="129" cy="626.586" rx="50" ry="14.286"/>
<ellipse display="none" fill="#B3B3B3" cx="129" cy="618.3" rx="50.75" ry="14.5"/>
<path display="none" opacity="0.1" fill="#FF0000" d="M93.645,636.687L129,626.586l35.355,10.102
<path display="none" opacity="0.1" fill="#FF0000" enable-background="new " d="M93.645,636.687L129,626.586l35.355,10.102
c9.048-2.585,14.645-6.157,14.645-10.102c0-7.89-22.386-14.286-50-14.286s-50,6.396-50,14.286
C79,630.531,84.596,634.102,93.645,636.687z"/>
<rect x="419" y="304.5" fill="#CCC1BC" stroke="#60544F" stroke-miterlimit="10" width="160" height="325.15"/>
<polygon fill="#F4EEE6" stroke="#60544F" stroke-miterlimit="10" points="639,686.5 359,686.5 419,626.5 579,626.5 "/>
<rect x="359" y="686.5" fill="#E0D8D3" stroke="#60544F" stroke-miterlimit="10" width="280" height="20"/>
<rect x="693" y="90.5" fill="none" width="216" height="110"/>
<text transform="matrix(1 0 0 1 693 100.7441)"><tspan x="0" y="0" fill="#60544F" font-family="'Monaco'" font-size="13">Code snippet for the hinge </tspan><tspan x="0" y="15.6" fill="#60544F" font-family="'Monaco'" font-size="13">opening and closing</tspan></text>
<path fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M919,450.5c0,6.627-5.373,12-12,12H691
c-6.627,0-12-5.373-12-12v-144c0-6.627,5.373-12,12-12h216c6.627,0,12,5.373,12,12V450.5z"/>
<rect x="693" y="314.5" fill="none" width="216" height="110"/>
<text transform="matrix(1 0 0 1 693 324.7441)" fill="#60544F" font-family="'Monaco'" font-size="13">Code snippet for pie-chart</text>
<path fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M323,346.5c0,6.627-5.373,12-12,12H95
c-6.627,0-12-5.373-12-12v-144c0-6.627,5.373-12,12-12h216c6.627,0,12,5.373,12,12V346.5z"/>
<rect x="97" y="210.5" fill="none" width="216" height="110"/>
<text transform="matrix(1 0 0 1 97 220.7441)"><tspan x="0" y="0" fill="#60544F" font-family="'Monaco'" font-size="13">Code snippet for the dial</tspan><tspan x="0" y="31.2" fill="#60544F" font-family="'Monaco'" font-size="13">Dial should rotate to the </tspan><tspan x="0" y="46.8" fill="#60544F" font-family="'Monaco'" font-size="13">next drink every 10 seconds </tspan><tspan x="0" y="62.4" fill="#60544F" font-family="'Monaco'" font-size="13">or so which would initiate </tspan><tspan x="0" y="78" fill="#60544F" font-family="'Monaco'" font-size="13">the liquid animation below</tspan></text>
<path fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M323,652.5c0,6.627-5.373,12-12,12H95
c-6.627,0-12-5.373-12-12v-144c0-6.627,5.373-12,12-12h216c6.627,0,12,5.373,12,12V652.5z"/>
<rect x="97" y="516.5" fill="none" width="216" height="110"/>
<text transform="matrix(1 0 0 1 97 526.7441)"><tspan x="0" y="0" fill="#60544F" font-family="'Monaco'" font-size="13">Code snippet for cup liquid </tspan><tspan x="0" y="15.6" fill="#60544F" font-family="'Monaco'" font-size="13">animation</tspan></text>
<rect x="802.2" y="524.5" fill="none" width="112.8" height="101.6"/>
<ellipse id="top" fill="none" stroke="#60544F" stroke-width="2" stroke-miterlimit="10" cx="499" cy="486.5" rx="70" ry="22"/>
<g id="tap">
@ -71,191 +56,271 @@
<path fill="#FFFFFF" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M569,436.5c0,6.627-5.373,12-12,12H443
c-6.627,0-12-5.373-12-12v-114c0-6.627,5.373-12,12-12h114c6.627,0,12,5.373,12,12V436.5z"/>
<g>
<path fill="#FFFFFF" d="M500,440c-33.359,0-60.5-27.14-60.5-60.5S466.641,319,500,319s60.5,27.14,60.5,60.5S533.359,440,500,440z"/>
<path fill="#FFFFFF" d="M500,440c-33.359,0-60.5-27.14-60.5-60.5S466.641,319,500,319s60.5,27.14,60.5,60.5S533.359,440,500,440z"
/>
<path fill="#60544F" d="M500,319.5c33.084,0,60,26.916,60,60s-26.916,60-60,60s-60-26.916-60-60S466.916,319.5,500,319.5
M500,318.5c-33.689,0-61,27.311-61,61s27.311,61,61,61s61-27.311,61-61S533.689,318.5,500,318.5L500,318.5z"/>
</g>
<polyline id="arrow" fill="#60544F" points="496.83,348.346 500,339.894 503.17,348.346"/>
<polyline id="arrow" fill="#60544F" points="496.83,348.346 500,339.894 503.17,348.346 "/>
<g>
<clipPath id="SVGID_8_">
<circle cx="500" cy="379.5" r="61"/>
</clipPath>
<line clip-path="url(#SVGID_8_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="498.856" y1="382.55" x2="498.856" y2="442.025"/>
<line clip-path="url(#SVGID_8_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="506.985" y1="376.834" x2="440.119" y2="398.56"/>
<line clip-path="url(#SVGID_8_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="503.882" y1="385.088" x2="463.047" y2="328.883"/>
<line clip-path="url(#SVGID_8_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="495.806" y1="378.044" x2="558.949" y2="398.56"/>
<line clip-path="url(#SVGID_8_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="495.187" y1="385.088" x2="536.022" y2="328.883"/>
<g>
<defs>
<circle id="SVGID_2_" cx="500" cy="379.5" r="61"/>
</defs>
<clipPath id="SVGID_3_">
<use xlink:href="#SVGID_2_" overflow="visible"/>
</clipPath>
<line clip-path="url(#SVGID_3_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="498.856" y1="382.55" x2="498.856" y2="442.025"/>
</g>
<g>
<defs>
<circle id="SVGID_4_" cx="500" cy="379.5" r="61"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_4_" overflow="visible"/>
</clipPath>
<line clip-path="url(#SVGID_5_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="506.985" y1="376.834" x2="440.119" y2="398.56"/>
</g>
<g>
<defs>
<circle id="SVGID_6_" cx="500" cy="379.5" r="61"/>
</defs>
<clipPath id="SVGID_7_">
<use xlink:href="#SVGID_6_" overflow="visible"/>
</clipPath>
<line clip-path="url(#SVGID_7_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="503.882" y1="385.088" x2="463.047" y2="328.883"/>
</g>
<g>
<defs>
<circle id="SVGID_8_" cx="500" cy="379.5" r="61"/>
</defs>
<clipPath id="SVGID_9_">
<use xlink:href="#SVGID_8_" overflow="visible"/>
</clipPath>
<line clip-path="url(#SVGID_9_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="495.806" y1="378.044" x2="558.949" y2="398.56"/>
</g>
<g>
<defs>
<circle id="SVGID_10_" cx="500" cy="379.5" r="61"/>
</defs>
<clipPath id="SVGID_11_">
<use xlink:href="#SVGID_10_" overflow="visible"/>
</clipPath>
<line clip-path="url(#SVGID_11_)" fill="none" stroke="#60544F" stroke-miterlimit="10" x1="495.187" y1="385.088" x2="536.022" y2="328.883"/>
</g>
</g>
<radialGradient id="SVGID_9_" cx="500" cy="380.72" r="35.99" gradientUnits="userSpaceOnUse">
<radialGradient id="SVGID_12_" cx="521" cy="422.78" r="35.99" gradientTransform="matrix(1 0 0 -1 -21 803.5)" gradientUnits="userSpaceOnUse">
<stop offset="0.8139" style="stop-color:#60544F"/>
<stop offset="1" style="stop-color:#60544F;stop-opacity:0"/>
</radialGradient>
<circle opacity="0.5" fill="url(#SVGID_9_)" cx="500" cy="380.72" r="35.99"/>
<circle opacity="0.5" fill="url(#SVGID_12_)" enable-background="new " cx="500" cy="380.72" r="35.99"/>
<g>
<path fill="#FFFFFF" d="M500,411.94c-17.888,0-32.44-14.553-32.44-32.44s14.553-32.44,32.44-32.44s32.44,14.553,32.44,32.44
S517.888,411.94,500,411.94z"/>
<path fill="#FFFFFF" d="M500,411.94c-17.888,0-32.44-14.553-32.44-32.44s14.553-32.44,32.44-32.44
c17.887,0,32.44,14.553,32.44,32.44S517.888,411.94,500,411.94z"/>
<path fill="#60544F" d="M500,347.56c17.612,0,31.94,14.328,31.94,31.94s-14.328,31.94-31.94,31.94s-31.94-14.328-31.94-31.94
S482.388,347.56,500,347.56 M500,346.56c-18.192,0-32.94,14.748-32.94,32.94s14.748,32.94,32.94,32.94s32.94-14.748,32.94-32.94
S518.192,346.56,500,346.56L500,346.56z"/>
</g>
<circle id="dot" fill="none" stroke="#60544F" stroke-miterlimit="10" cx="500" cy="355.71" r="3.66"/>
<circle fill="none" cx="500" cy="379.5" r="43.298"/>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 478.4503 341.8154)"><tspan x="0" y="0" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">A</tspan><tspan x="5.75" y="-0.136" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="9.426">m</tspan><tspan x="14.093" y="1.377" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="18.164">e</tspan><tspan x="18.623" y="2.9" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="23.23">r</tspan><tspan x="21.347" y="4.074" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="26.744">i</tspan><tspan x="23.206" y="4.957" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="30.619">c</tspan><tspan x="26.808" y="7.064" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="36.438">a</tspan><tspan x="30.559" y="9.794" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="43.091">n</tspan><tspan x="34.448" y="13.416" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="50.099">o</tspan></text>
<text transform="matrix(-0.6466 0.7629 -0.7629 -0.6466 535.9566 404.1576)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">M</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 478.4504 341.8154)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">A</text>
<text transform="matrix(-0.7585 0.6517 -0.6517 -0.7585 530.3702 410.5787)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">o</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 483.5673 339.189)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">m</text>
<text transform="matrix(-0.8241 0.5664 -0.5664 -0.8241 526.3544 414.0009)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">c</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 491.7365 336.9175)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">e</text>
<text transform="matrix(-0.8808 0.4734 -0.4734 -0.8808 522.9501 416.3946)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">h</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 496.4777 336.3157)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">r</text>
<text transform="matrix(-0.9297 0.3684 -0.3684 -0.9297 518.2142 418.9277)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">a</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 499.4411 336.1863)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">i</text>
<text transform="matrix(-0.9696 -0.2448 0.2448 -0.9696 493.7035 422.6109)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">M</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 501.4992 336.1714)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">c</text>
<text transform="matrix(-0.9214 -0.3886 0.3886 -0.9214 485.4735 420.3994)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">a</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 505.6591 336.4995)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">a</text>
<text transform="matrix(-0.8767 -0.4811 0.4811 -0.8767 481.1739 418.5817)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">c</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 510.2248 337.3235)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">n</text>
<text transform="matrix(-0.8191 -0.5736 0.5736 -0.8191 477.4996 416.6144)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">h</text>
<text transform="matrix(0.9002 -0.4355 0.4355 0.9002 515.3032 338.8904)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">o</text>
<text transform="matrix(-0.7682 -0.6402 0.6402 -0.7682 473.1222 413.4716)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">i</text>
<text transform="matrix(-0.6466 0.7629 -0.7629 -0.6466 535.9556 404.1569)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6756">M</text>
<text transform="matrix(-0.7165 -0.6976 0.6976 -0.7165 471.525 412.2141)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">a</text>
<text transform="matrix(-0.7585 0.6517 -0.6517 -0.7585 530.3695 410.5786)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">o</text>
<text transform="matrix(-0.6298 -0.7768 0.7768 -0.6298 468.1788 409.0078)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">tt</text>
<text transform="matrix(-0.8241 0.5664 -0.5664 -0.8241 526.3553 414.0005)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">c</text>
<text transform="matrix(-0.5286 -0.8489 0.8489 -0.5286 464.7282 404.7621)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">o</text>
<text transform="matrix(-0.8808 0.4734 -0.4734 -0.8808 522.9499 416.3944)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6746">h</text>
<text transform="matrix(-0.9297 0.3684 -0.3684 -0.9297 518.2133 418.9275)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">a</text>
<text transform="matrix(-0.9696 -0.2448 0.2448 -0.9696 493.7036 422.6106)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">M</text>
<text transform="matrix(-0.9214 -0.3886 0.3886 -0.9214 485.4735 420.4004)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">a</text>
<text transform="matrix(-0.8767 -0.4811 0.4811 -0.8767 481.1738 418.5826)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">c</text>
<text transform="matrix(-0.8191 -0.5736 0.5736 -0.8191 477.4998 416.6138)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">h</text>
<text transform="matrix(-0.7682 -0.6402 0.6402 -0.7682 473.1217 413.4721)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">i</text>
<text transform="matrix(-0.7165 -0.6976 0.6976 -0.7165 471.525 412.2145)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">a</text>
<text transform="matrix(-0.6298 -0.7768 0.7768 -0.6298 468.1793 409.0093)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">tt</text>
<text transform="matrix(-0.5286 -0.8489 0.8489 -0.5286 464.7281 404.7617)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">o</text>
<circle fill="none" cx="500" cy="379.5" r="43.298"/>
<text transform="matrix(0.4804 0.8771 -0.8771 0.4804 536.8203 356.5432)"><tspan x="0" y="0" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">L</tspan><tspan x="4.707" y="-0.008" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="6.178">a</tspan><tspan x="9.302" y="0.453" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="12.752">tt</tspan><tspan x="14.665" y="1.678" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="19.49">é</tspan></text>
<text transform="matrix(0.4804 0.8771 -0.8771 0.4804 536.8207 356.5429)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6755">L</text>
<text transform="matrix(0.4804 0.8771 -0.8771 0.4804 539.0884 360.6679)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6755">a</text>
<text transform="matrix(0.4804 0.8771 -0.8771 0.4804 540.8921 364.9197)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6755">t</text>
<text transform="matrix(0.4804 0.8771 -0.8771 0.4804 542.2816 367.4567)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6755">t</text>
<text transform="matrix(0.4804 0.8771 -0.8771 0.4804 542.3942 370.2121)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6755">é</text>
<circle id="knob" fill="none" cx="500" cy="379.5" r="43.298"/>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 456.8572 383.8038)"><tspan x="0" y="0" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675">E</tspan><tspan x="5.072" y="0.03" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="5.817">s</tspan><tspan x="8.688" y="0.346" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="11.692">p</tspan><tspan x="13.782" y="1.447" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="17.026">r</tspan><tspan x="16.61" y="2.266" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="22.057">e</tspan><tspan x="21.018" y="4.071" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="27.578">s</tspan><tspan x="24.266" y="5.76" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="32.436">s</tspan><tspan x="27.359" y="7.663" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.675" rotate="38.365">o</tspan></text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 456.858 383.803)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">E</text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 456.6931 378.7348)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">s</text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 456.8699 375.109)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">p</text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 457.7745 369.9764)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">r</text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 458.4847 367.119)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">e</text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 460.1193 362.6446)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">s</text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 461.6823 359.3342)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">s</text>
<text transform="matrix(-0.0384 -0.9993 0.9993 -0.0384 463.4649 356.1693)" fill="#423733" font-family="'AdobeClean-Light'" font-size="10.6754">o</text>
<circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="439" cy="318.5" r="2"/>
<circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="561" cy="318.5" r="2"/>
<circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="561" cy="440.5" r="2"/>
<circle fill="#FFFFFF" stroke="#60544F" stroke-miterlimit="10" cx="439" cy="440.5" r="2"/>
<g id="pie-chart">
<circle fill="#D6EDEE" cx="735" cy="560" r="35"/>
<path fill="#60544F" d="M746.089,527.343c-4.258-1.827-8.947-2.843-13.874-2.843v35.215L746.089,527.343z"/>
<circle fill="#D6EDEE" cx="735" cy="560" r="35"/>
<path fill="#60544F" d="M746.089,527.343c-4.258-1.827-8.947-2.843-13.874-2.843v35.215L746.089,527.343z"/>
<path fill="#60544F" d="M732.215,524.5c19.449,0,35.215,15.766,35.215,35.215s-15.766,35.215-35.215,35.215
c-19.449,0-35.215-15.766-35.215-35.215S712.766,524.5,732.215,524.5 M732.215,523.5c-19.969,0-36.215,16.246-36.215,36.215
s16.246,36.215,36.215,36.215s36.215-16.246,36.215-36.215S752.185,523.5,732.215,523.5L732.215,523.5z"/>
</g>
<g id="legend">
<rect x="785.5" y="524.5" fill="#60544F" stroke="#60544F" width="10" height="10"/>
<rect x="785.5" y="544.5" fill="#D6EDEE" stroke="#60544F" stroke-miterlimit="10" width="10" height="10"/>
<text transform="matrix(1 0 0 1 802.2 533.1641)"><tspan x="0" y="0" fill="#60544F" font-family="'AdobeClean-Light'" font-size="12">Espresso (10%)</tspan><tspan x="0" y="20" fill="#60544F" font-family="'AdobeClean-Light'" font-size="12">Hot Water (90%)</tspan></text>
<text transform="matrix(1 0 0 1 695.0001 628.8398)" fill="#60544F" font-family="'AdobeClean-Regular'" font-size="20">Americano</text>
</g>
<g id="legend">
<rect x="785.5" y="524.5" fill="#60544F" stroke="#60544F" width="10" height="10"/>
<rect x="785.5" y="544.5" fill="#D6EDEE" stroke="#60544F" stroke-miterlimit="10" width="10" height="10"/>
<text transform="matrix(1 0 0 1 802.2 533.1641)" fill="#60544F" font-family="'AdobeClean-Light'" font-size="12">Espresso (10%)</text>
<text transform="matrix(1 0 0 1 802.2 553.1641)" fill="#60544F" font-family="'AdobeClean-Light'" font-size="12">Hot Water (90%)</text>
<text transform="matrix(1 0 0 1 695.0001 628.8398)" fill="#60544F" font-family="'AdobeClean-Regular'" font-size="20">Americano</text>
</g>
<path fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M917,634.5c0,6.627-5.373,12-12,12H691
c-6.627,0-12-5.373-12-12v-124c0-6.627,5.373-12,12-12h214c6.627,0,12,5.373,12,12V634.5z"/>
<path id="lead-target" fill="#CCC1BC" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M597.429,278.5
559,228.5 438,228.5 400.571,278.5z"/>
<path id="lead-target" fill="#CCC1BC" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M597.429,278.5L559,228.5H438
l-37.429,50H597.429z"/>
<line fill="none" stroke="#60544F" stroke-miterlimit="10" x1="439" y1="228.5" x2="439" y2="278.5"/>
<line fill="none" stroke="#60544F" stroke-miterlimit="10" x1="559.571" y1="228.5" x2="559.571" y2="278.5"/>
<polygon fill="#D6EDEE" stroke="#60544F" stroke-miterlimit="10" points="499,277.5 584.886,277.5 559.143,243.5 499,243.5 "/>
<clipPath id="SVGID_11_">
<polygon id="SVGID_10_" points="498.886,277.259 413,277.259 438.743,243.259 498.886,243.259"/>
</clipPath>
<g clip-path="url(#SVGID_11_)" fill="#7F6C65" stroke="#60544F">
<ellipse stroke-miterlimit="10" cx="450.912" cy="258.311" rx="4" ry="6"/>
<ellipse transform="matrix(0.8735 0.4868 -0.4868 0.8735 185.0145 -174.0181)" stroke-miterlimit="10" cx="427.361" cy="269.004" rx="4" ry="6"/>
<ellipse transform="matrix(0.4709 0.8822 -0.8822 0.4709 491.3868 -293.8032)" stroke-miterlimit="10" cx="490.62" cy="262.739" rx="4" ry="6"/>
<ellipse transform="matrix(0.4709 0.8822 -0.8822 0.4709 472.8499 -249.0298)" stroke-miterlimit="10" cx="444.026" cy="269.672" rx="4" ry="6"/>
<ellipse transform="matrix(0.4709 0.8822 -0.8822 0.4709 491.0785 -287.6386)" stroke-miterlimit="10" cx="485.327" cy="265.564" rx="4" ry="6"/>
<ellipse transform="matrix(0.4709 0.8822 -0.8822 0.4709 472.5871 -261.8949)" stroke-miterlimit="10" cx="454.62" cy="263.021" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 180.0182 -187.4517)" stroke-miterlimit="10" cx="464.912" cy="266.311" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 182.9454 -188.5036)" stroke-miterlimit="10" cx="468.48" cy="271.639" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 184.9501 -192.5225)" stroke-miterlimit="10" cx="477.52" cy="273.639" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 176.1219 -189.2095)" stroke-miterlimit="10" cx="466.48" cy="257.639" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 178.3158 -185.3328)" stroke-miterlimit="10" cx="459.824" cy="263.965" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 178.3988 -172.4885)" stroke-miterlimit="10" cx="434.176" cy="270.553" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 174.8279 -192.793)" stroke-miterlimit="10" cx="473" cy="253.259" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 181.656 -175.346)" stroke-miterlimit="10" cx="441.52" cy="275.639" rx="4" ry="6"/>
<ellipse transform="matrix(0.8824 0.4706 -0.4706 0.8824 186.8234 -193.5341)" stroke-miterlimit="10" cx="480.48" cy="276.88" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 632.7275 -246.8)" stroke-miterlimit="10" cx="462.912" cy="252.311" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 631.7323 -247.8663)" stroke-miterlimit="10" cx="463.048" cy="251.187" rx="4" ry="6"/>
<ellipse transform="matrix(0.5855 -0.8107 0.8107 0.5855 -15.0853 468.8701)" stroke-miterlimit="10" cx="450.952" cy="249.187" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 617.8742 -219.1174)" stroke-miterlimit="10" cx="439.048" cy="257.332" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 651.6071 -251.1782)" stroke-miterlimit="10" cx="474.952" cy="261.332" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 633.6828 -195.7014)" stroke-miterlimit="10" cx="433.048" cy="278.427" rx="4" ry="6"/>
<ellipse stroke-miterlimit="10" cx="439" cy="269.259" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 621.3791 -189.3823)" stroke-miterlimit="10" cx="423.144" cy="274.281" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 651.1705 -224.7622)" stroke-miterlimit="10" cx="459.048" cy="274.281" rx="4" ry="6"/>
<ellipse stroke-miterlimit="10" cx="437" cy="263.259" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 632.1577 -234.1829)" stroke-miterlimit="10" cx="455.136" cy="258.281" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 637.6056 -222.5501)" stroke-miterlimit="10" cx="450.952" cy="267.332" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 651.5666 -271.4214)" stroke-miterlimit="10" cx="486.952" cy="251.187" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 666.0197 -235.591)" stroke-miterlimit="10" cx="472.903" cy="277.684" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 656.3539 -260.8155)" stroke-miterlimit="10" cx="483.048" cy="259.332" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 679.7578 -254.4196)" stroke-miterlimit="10" cx="490.952" cy="276.427" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 657.1677 -270.0732)" stroke-miterlimit="10" cx="488.952" cy="255.187" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 659.8586 -254.4962)" stroke-miterlimit="10" cx="481.048" cy="264.573" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 627.1056 -218.0805)" stroke-miterlimit="10" cx="443.048" cy="263.332" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 646.9791 -261.9732)" stroke-miterlimit="10" cx="479.048" cy="253.187" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 676.4762 -260.7125)" stroke-miterlimit="10" cx="493.048" cy="271.332" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 622.3183 -228.6863)" stroke-miterlimit="10" cx="446.952" cy="255.187" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 670.7228 -249.2274)" stroke-miterlimit="10" cx="483.351" cy="273.658" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 655.1118 -244.859)" stroke-miterlimit="10" cx="472.952" cy="266.573" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 654.4658 -232.0919)" stroke-miterlimit="10" cx="465.048" cy="272.573" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 661.1498 -246.5111)" stroke-miterlimit="10" cx="476.952" cy="269.332" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 643.9842 -214.0392)" stroke-miterlimit="10" cx="449.088" cy="275.375" rx="4" ry="6"/>
<ellipse transform="matrix(0.1703 0.9854 -0.9854 0.1703 642.2267 -225.5569)" stroke-miterlimit="10" cx="455.048" cy="268.573" rx="4" ry="6"/>
<g>
<defs>
<polygon id="SVGID_13_" points="498.886,277.259 413,277.259 438.743,243.259 498.886,243.259 "/>
</defs>
<clipPath id="SVGID_14_">
<use xlink:href="#SVGID_13_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_14_)">
<ellipse fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="450.912" cy="258.311" rx="4" ry="6"/>
<ellipse transform="matrix(0.4868 -0.8735 0.8735 0.4868 -15.6506 511.3535)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="427.363" cy="268.996" rx="6" ry="4"/>
<ellipse transform="matrix(0.8822 -0.4709 0.4709 0.8822 -65.9239 261.9898)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="490.631" cy="262.746" rx="6" ry="4"/>
<ellipse transform="matrix(0.8822 -0.4709 0.4709 0.8822 -74.6779 240.8655)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="444.037" cy="269.678" rx="6" ry="4"/>
<ellipse transform="matrix(0.8822 -0.4709 0.4709 0.8822 -67.878 259.8302)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="485.338" cy="265.571" rx="6" ry="4"/>
<ellipse transform="matrix(0.8822 -0.4709 0.4709 0.8822 -70.2979 245.0704)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="454.631" cy="263.027" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 11.1471 551.2357)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="464.931" cy="266.329" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 8.3345 557.2053)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="468.499" cy="271.657" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 11.3558 566.2411)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="477.539" cy="273.657" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 19.6293 548.0284)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="466.499" cy="257.657" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 10.5231 545.5045)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="459.843" cy="263.983" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 -8.8687 526.3604)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="434.193" cy="270.571" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 26.9462 551.4629)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="473.019" cy="253.277" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 -9.4687 535.5333)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="441.538" cy="275.657" rx="6" ry="4"/>
<ellipse transform="matrix(0.4706 -0.8824 0.8824 0.4706 10.063 570.5688)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="480.499" cy="276.899" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -36.2078 82.5229)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="462.934" cy="252.322" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -36.0145 82.5295)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="463.07" cy="251.198" rx="6" ry="4"/>
<ellipse transform="matrix(-0.8107 -0.5855 0.5855 -0.8107 670.6575 715.2228)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="450.963" cy="249.182" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -37.4117 78.5321)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="439.069" cy="257.344" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -37.5684 84.7052)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="474.975" cy="261.344" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -41.092 77.8184)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="433.069" cy="278.44" rx="6" ry="4"/>
<ellipse fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="439" cy="269.259" rx="4" ry="6"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -40.5305 76.071)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="423.164" cy="274.294" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -40.006 82.1857)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="459.07" cy="274.294" rx="6" ry="4"/>
<ellipse fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="437" cy="263.259" rx="4" ry="6"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -37.3383 81.2857)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="455.157" cy="258.293" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -38.9408 80.7055)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="450.974" cy="267.345" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -35.6652 86.6006)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="486.975" cy="251.198" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -40.3832 84.595)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="472.925" cy="277.697" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -37.1095 86.0548)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="483.071" cy="259.344" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -39.9054 87.6506)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="490.976" cy="276.44" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -36.3173 86.9996)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="488.975" cy="255.198" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -38.0313 85.7907)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="481.071" cy="264.585" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -38.3751 79.3009)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="443.069" cy="263.344" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -36.1213 85.2837)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="479.071" cy="253.198" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -39.0071 87.9331)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="493.072" cy="271.345" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -36.9308 79.8467)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="446.973" cy="255.199" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -39.5449 86.3158)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="483.375" cy="273.671" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -38.4901 84.4411)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="472.975" cy="266.585" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -39.6275 83.1826)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="465.07" cy="272.586" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -38.9016 85.1627)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="476.975" cy="269.345" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -40.3379 80.5055)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="449.109" cy="275.388" rx="6" ry="4"/>
<ellipse transform="matrix(0.9854 -0.1703 0.1703 0.9854 -39.0923 81.4211)" fill="#7F6C65" stroke="#60544F" stroke-miterlimit="10" cx="455.07" cy="268.585" rx="6" ry="4"/>
</g>
</g>
<polygon fill="#CCC1BC" stroke="#60544F" stroke-miterlimit="10" points="503,277.5 501.297,235.5 495.846,235.5 495,277.5 "/>
<path id="lead" fill="#E0D8D3" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M569,132.5 559,228.5 438,228.5 429,132.5z"/>
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="567" y1="215.5" x2="581" y2="215.5">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<circle fill="url(#SVGID_12_)" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" cx="574" cy="215.5" r="7"/>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="441" y1="327.5" x2="455" y2="327.5">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<circle fill="url(#SVGID_13_)" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" cx="448" cy="327.5" r="7"/>
<linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="443" y1="485.5" x2="457" y2="485.5">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<circle fill="url(#SVGID_14_)" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" cx="450" cy="485.5" r="7"/>
<linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="691" y1="521.5" x2="705" y2="521.5">
<stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
<stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0.3"/>
</linearGradient>
<circle fill="url(#SVGID_15_)" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" cx="698" cy="521.5" r="7"/>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="6" x1="581" y1="215.5" x2="679" y2="200.5"/>
<g>
<g>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" x1="323" y1="302.5" x2="325.935" y2="303.122"/>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="6.0326,6.0326" x1="331.836" y1="304.372" x2="435.114" y2="326.253"/>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" x1="438.065" y1="326.878" x2="441" y2="327.5"/>
</g>
</g>
<g>
<g>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" x1="323" y1="514.5" x2="325.932" y2="513.865"/>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="6.1465,6.1465" x1="331.939" y1="512.563" x2="437.064" y2="489.786"/>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" x1="440.068" y1="489.135" x2="443" y2="488.5"/>
</g>
</g>
<g>
<g>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" x1="698" y1="514.5" x2="698" y2="511.5"/>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="6.5714,6.5714" x1="698" y1="504.929" x2="698" y2="468.786"/>
<line fill="none" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" x1="698" y1="465.5" x2="698" y2="462.5"/>
</g>
</g>
<path id="lead" fill="#E0D8D3" stroke="#60544F" stroke-width="3" stroke-miterlimit="10" d="M569,132.5l-10,96H438l-9-96H569z"/>
<ellipse id="waterlevel" display="none" fill="none" stroke="#60544F" stroke-width="2" stroke-miterlimit="10" cx="499" cy="526.5" rx="66.5" ry="20.9"/>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 24 KiB

48
dist/reference.html vendored
View File

@ -126,7 +126,7 @@ console.log(el.attr("fill")); // #fc0
<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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2213 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2213">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2212 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2212">&#x27ad;</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>
@ -331,7 +331,7 @@ with <code>data-</code> attributes)
<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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2262 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2262">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2261 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2261">&#x27ad;</a></h3></header>
<section><div class="extra" id="Element.innerSVG-extra"></div><div class="dr-method"><p>Returns SVG code for the element&#39;s contents, equivalent to HTML&#39;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>
@ -463,7 +463,7 @@ c.attr({
<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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2238 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2238">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2237 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2237">&#x27ad;</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>
@ -497,7 +497,7 @@ If key is not provided, removes all the data of the element.
<section><div class="extra" id="Element.toDefs-extra"></div><div class="dr-method"><p>Moves element to the shared <code>&lt;defs&gt;</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2943 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2943">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2942 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2942">&#x27ad;</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&#39;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>
@ -662,10 +662,10 @@ If key is not provided, removes all the data of the element.
</p>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-Element">Element</em> <span class="dr-description">the <code>&lt;use&gt;</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">&#x2693;</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2332 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2332">&#x27ad;</a></h3></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">&#x2693;</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">&#x27ad;</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2339 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2339">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2338 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2338">&#x27ad;</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">&#x2693;</a></h2></header>
@ -786,7 +786,7 @@ If key is not provided, removes all the data of the element.
</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">&#x2693;</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2612 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2612">&#x27ad;</a></h3></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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2611 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2611">&#x27ad;</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>
@ -802,7 +802,7 @@ If key is not provided, removes all the data of the element.
<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.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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2552 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2552">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2551 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2551">&#x27ad;</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>
@ -820,7 +820,7 @@ var c = paper.el("circle").attr({
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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2687 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2687">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2686 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2686">&#x27ad;</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>
@ -854,7 +854,7 @@ var c = paper.el("circle").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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2763 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2763">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2762 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2762">&#x27ad;</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>
@ -874,7 +874,7 @@ var c = paper.el("circle").attr({
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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2927 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2927">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2926 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2926">&#x27ad;</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>
@ -917,10 +917,10 @@ half the width, from black to white:
});
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2769 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2769">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2768 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2768">&#x27ad;</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2644 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2644">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2643 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2643">&#x27ad;</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>
@ -945,7 +945,7 @@ half the width, from black to white:
<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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2825 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2825">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2824 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2824">&#x27ad;</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>
@ -964,7 +964,7 @@ half the width, from black to white:
<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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2732 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2732">&#x27ad;</a></h3></header>
</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">&#x2693;</a><a class="dr-sourceline" title="Go to line 2731 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2731">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.path-extra"></div><div class="dr-method"><p>Creates a <code>&lt;path&gt;</code> element using the given string as the path&#39;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>
@ -999,10 +999,10 @@ Note: there is a special case when a path consists of only three commands: <code
// draw a diagonal line:
// move to 10,10, line to 90,90
</code></pre></section>
</div></section></article><article id="Paper.polygon" class="Paper-polygon-section"><header><h3 id="Paper.polygon" class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2874 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2874">&#x27ad;</a></h3></header>
</div></section></article><article id="Paper.polygon" class="Paper-polygon-section"><header><h3 id="Paper.polygon" class="dr-method">Paper.polygon()<a href="#Paper.polygon" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2873 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2873">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.polygon-extra"></div><div class="dr-method"><p>Draws a polygon. See <a href="#Paper.polyline" class="dr-link">Paper.polyline</a>
</p>
</div></section></article><article id="Paper.polyline" class="Paper-polyline-section"><header><h3 id="Paper.polyline" class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2854 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2854">&#x27ad;</a></h3></header>
</div></section></article><article id="Paper.polyline" class="Paper-polyline-section"><header><h3 id="Paper.polyline" class="dr-method">Paper.polyline(…)<a href="#Paper.polyline" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2853 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2853">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.polyline-extra"></div><div class="dr-method"><p>Draws a polyline
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">points</span>
@ -1019,7 +1019,7 @@ Note: there is a special case when a path consists of only three commands: <code
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var p1 = paper.polyline([10, 10, 100, 100]);
var p2 = paper.polyline(10, 10, 100, 100);
</code></pre></section>
</div></section></article><article id="Paper.rect" class="Paper-rect-section"><header><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, [rx], [ry])<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2575 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2575">&#x27ad;</a></h3></header>
</div></section></article><article id="Paper.rect" class="Paper-rect-section"><header><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, [rx], [ry])<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2574 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2574">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.rect-extra"></div><div class="dr-method"><p></p>
<p>Draws a rectangle
</p>
@ -1050,7 +1050,7 @@ var c = paper.rect(10, 10, 50, 50);
// rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);
</code></pre></section>
</div></section></article><article id="Paper.text" class="Paper-text-section"><header><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2797 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2797">&#x27ad;</a></h3></header>
</div></section></article><article id="Paper.text" class="Paper-text-section"><header><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2796 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2796">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.text-extra"></div><div class="dr-method"><p>Draws a text string
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">x</span>
@ -1067,7 +1067,7 @@ var c = paper.rect(40, 40, 50, 50, 10);
<h3>Usage</h3><section class="code"><pre class="javascript code"><code data-language="javascript" class="language-javascript">var t1 = paper.text(50, 50, "Snap");
var t2 = paper.text(50, 50, ["S","n","a","p"]);
</code></pre></section>
</div></section></article><article id="Paper.toString" class="Paper-toString-section"><header><h3 id="Paper.toString" class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2943 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2943">&#x27ad;</a></h3></header>
</div></section></article><article id="Paper.toString" class="Paper-toString-section"><header><h3 id="Paper.toString" class="dr-method">Paper.toString()<a href="#Paper.toString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2942 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2942">&#x27ad;</a></h3></header>
<section><div class="extra" id="Paper.toString-extra"></div><div class="dr-method"><p>Returns SVG code for the element, equivalent to HTML&#39;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>
@ -1153,7 +1153,7 @@ Returns a matrix based on the given parameters
<span class="dr-description">&#160;</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Matrix" class="dr-link">Matrix</a></span></p>
</div></section></article><article id="Snap.ajax" class="Snap-ajax-section"><header><h3 id="Snap.ajax" class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2975 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2975">&#x27ad;</a></h3></header>
</div></section></article><article id="Snap.ajax" class="Snap-ajax-section"><header><h3 id="Snap.ajax" class="dr-method">Snap.ajax(…)<a href="#Snap.ajax" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2974 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2974">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.ajax-extra"></div><div class="dr-method"><p>Simple implementation of Ajax
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">url</span>
@ -1406,7 +1406,7 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']
}
}));
</code></pre></section>
</div></section></article><article id="Snap.fragment" class="Snap-fragment-section"><header><h3 id="Snap.fragment" class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2350 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2350">&#x27ad;</a></h3></header>
</div></section></article><article id="Snap.fragment" class="Snap-fragment-section"><header><h3 id="Snap.fragment" class="dr-method">Snap.fragment(varargs)<a href="#Snap.fragment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2349 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2349">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.fragment-extra"></div><div class="dr-method"><p>Creates a DOM fragment from a given list of elements or strings
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">varargs</span>
@ -1524,7 +1524,7 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']
<span class="dr-description">name of the type, e.g., <code>string</code>, <code>function</code>, <code>number</code>, etc.</span></li>
</ol></div>
<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description"><code>true</code> if given value is of given type</span></p>
</div></section></article><article id="Snap.load" class="Snap-load-section"><header><h3 id="Snap.load" class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3021 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L3021">&#x27ad;</a></h3></header>
</div></section></article><article id="Snap.load" class="Snap-load-section"><header><h3 id="Snap.load" class="dr-method">Snap.load(url, callback, [scope])<a href="#Snap.load" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3020 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L3020">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.load-extra"></div><div class="dr-method"><p>Loads external SVG file as a <a href="#Fragment" class="dr-link">Fragment</a> (see <a href="#Snap.ajax" class="dr-link">Snap.ajax</a> for more advanced AJAX)
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">url</span>
@ -1538,7 +1538,7 @@ paper.path(Snap.format("M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']
<span class="dr-type"><em class="dr-type-object">object</em></span>
<span class="dr-description">scope of callback</span></li>
</ol></div>
</div></section></article><article id="Snap.parse" class="Snap-parse-section"><header><h3 id="Snap.parse" class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2301 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2301">&#x27ad;</a></h3></header>
</div></section></article><article id="Snap.parse" class="Snap-parse-section"><header><h3 id="Snap.parse" class="dr-method">Snap.parse(svg)<a href="#Snap.parse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2300 in the source" href="https://github.com/adobe-webplatform/savage/blob/master/src/svg.js#L2300">&#x27ad;</a></h3></header>
<section><div class="extra" id="Snap.parse-extra"></div><div class="dr-method"><p>Parses SVG fragment and converts it into a <a href="#Fragment" class="dr-link">Fragment</a>
</p>
<div class="topcoat-list__container"><h3 class="topcoat-list__header">Parameters</h3><ol class="topcoat-list"><li class="topcoat-list__item"><span class="dr-param">svg</span>

4
dist/snap.svg-min.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/snap.svg.js vendored
View File

@ -3268,7 +3268,6 @@ function arrayFirstValue(arr) {
for (var key in keys) if (keys[has](key)) {
attr[key] = keys[key](val);
}
console.log(attr["stroke-dashoffset"]);
el.attr(attr);
}, easing);
el.anims[anim.id] = anim;