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

Added paper.svg() method

master
Dmitry Baranovskiy 2014-04-22 17:12:11 +10:00
parent 2b8bcc1be7
commit 3469abf423
5 changed files with 174 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

31
dist/snap.svg.js vendored
View File

@ -3698,7 +3698,6 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
} }
return el; return el;
}; };
// SIERRA Paper.g(): Don't understand the code comment about the order being _different._ Wouldn't it be a rect followed by a circle?
/*\ /*\
* Paper.g * Paper.g
[ method ] [ method ]
@ -3733,6 +3732,36 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
} }
return el; return el;
}; };
/*\
* Paper.svg
[ method ]
**
* Creates a nested SVG element.
- width (number) @optional width of the element
- height (number) @optional height of the element
- x (number) @optional viewbox X
- y (number) @optional viewbox Y
- w (number) @optional viewbox width
- h (number) @optional viewbox height
**
= (object) the `svg` element
**
\*/
proto.svg = function (width, height, x, y, w, h) {
var el = make("svg", this.node),
attrs = {};
if (width != null) {
attrs.width = width;
}
if (height != null) {
attrs.height = height;
}
if (x != null && y != null && w != null && h != null) {
attrs.viewBox = [x, y, w, h];
}
el.attr(attrs);
return el;
};
/*\ /*\
* Paper.text * Paper.text
[ method ] [ method ]

105
doc/reference.html
View File

@ -435,6 +435,10 @@
<a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a> <a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a>
</li> </li>
<li class="dr-lvl1">
<a href="#Paper.svg" class="dr-method"><span>Paper.svg()</span></a>
</li>
<li class="dr-lvl1"> <li class="dr-lvl1">
<a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a> <a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a>
</li> </li>
@ -6744,7 +6748,7 @@ Note: there is a special case when a path consists of only three commands: <code
<article id="Paper.g"> <article id="Paper.g">
<header> <header>
<h3 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 2963 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2963">&#x27ad;</a></h3> <h3 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 2962 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2962">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.g-extra"></div> <div class="extra" id="Paper.g-extra"></div>
@ -6853,7 +6857,7 @@ g.add(c2, c1);</code></pre></section>
<article id="Paper.group"> <article id="Paper.group">
<header> <header>
<h3 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 2969 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2969">&#x27ad;</a></h3> <h3 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 2968 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2968">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.group-extra"></div> <div class="extra" id="Paper.group-extra"></div>
@ -6872,13 +6876,88 @@ g.add(c2, c1);</code></pre></section>
</div>
</section>
</article>
<article id="Paper.svg">
<header>
<h3 class="dr-method">Paper.svg(width, height, x, y, w, h)<a href="#Paper.svg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 2992 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2992">&#x27ad;</a></h3>
</header>
<section>
<div class="extra" id="Paper.svg-extra"></div>
<div class="dr-method">
<p>Creates a nested SVG element.
</p>
<div class="topcoat-list__container">
<h3 class="topcoat-list__header">Parameters</h3>
<ol class="topcoat-list">
<li class="topcoat-list__item"><span class="dr-param">width</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> width of the element</span></li>
<li class="topcoat-list__item"><span class="dr-param">height</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> height of the element</span></li>
<li class="topcoat-list__item"><span class="dr-param">x</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox X</span></li>
<li class="topcoat-list__item"><span class="dr-param">y</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox Y</span></li>
<li class="topcoat-list__item"><span class="dr-param">w</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox width</span></li>
<li class="topcoat-list__item"><span class="dr-param">h</span>
<span class="dr-type"><em class="dr-type-number">number</em> </span>
<span class="dr-description"><a href="#optional" class="dr-link">optional</a> viewbox height</span></li>
</ol>
</div>
<p class="dr-returns">
<strong class="dr-title">Returns:</strong>
<em class="dr-type-object">object</em>
<span class="dr-description">the <code>svg</code> element</span>
</p>
</div> </div>
</section> </section>
</article> </article>
<article id="Paper.text"> <article id="Paper.text">
<header> <header>
<h3 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 2998 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L2998">&#x27ad;</a></h3> <h3 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 3027 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3027">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.text-extra"></div> <div class="extra" id="Paper.text-extra"></div>
@ -6972,7 +7051,7 @@ t1.attr({textpath: pth});</code></pre></section>
<article id="Paper.line"> <article id="Paper.line">
<header> <header>
<h3 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 3026 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3026">&#x27ad;</a></h3> <h3 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 3055 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3055">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.line-extra"></div> <div class="extra" id="Paper.line-extra"></div>
@ -7063,7 +7142,7 @@ t1.attr({textpath: pth});</code></pre></section>
<article id="Paper.polyline"> <article id="Paper.polyline">
<header> <header>
<h3 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 3055 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3055">&#x27ad;</a></h3> <h3 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 3084 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3084">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.polyline-extra"></div> <div class="extra" id="Paper.polyline-extra"></div>
@ -7175,7 +7254,7 @@ var p2 = paper.polyline(10, 10, 100, 100);</code></pre></section>
<article id="Paper.polygon"> <article id="Paper.polygon">
<header> <header>
<h3 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 3075 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3075">&#x27ad;</a></h3> <h3 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 3104 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3104">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.polygon-extra"></div> <div class="extra" id="Paper.polygon-extra"></div>
@ -7200,7 +7279,7 @@ var p2 = paper.polyline(10, 10, 100, 100);</code></pre></section>
<article id="Paper.gradient"> <article id="Paper.gradient">
<header> <header>
<h3 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 3128 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3128">&#x27ad;</a></h3> <h3 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 3157 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3157">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.gradient-extra"></div> <div class="extra" id="Paper.gradient-extra"></div>
@ -7398,7 +7477,7 @@ half the width, from black to white:
<article id="Paper.toString"> <article id="Paper.toString">
<header> <header>
<h3 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 3144 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3144">&#x27ad;</a></h3> <h3 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 3173 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3173">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.toString-extra"></div> <div class="extra" id="Paper.toString-extra"></div>
@ -7440,7 +7519,7 @@ half the width, from black to white:
<article id="Paper.clear"> <article id="Paper.clear">
<header> <header>
<h3 class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3162 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3162">&#x27ad;</a></h3> <h3 class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3191 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3191">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Paper.clear-extra"></div> <div class="extra" id="Paper.clear-extra"></div>
@ -7465,7 +7544,7 @@ half the width, from black to white:
<article id="Snap.ajax"> <article id="Snap.ajax">
<header> <header>
<h3 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 3193 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3193">&#x27ad;</a></h3> <h3 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 3222 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3222">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.ajax-extra"></div> <div class="extra" id="Snap.ajax-extra"></div>
@ -7569,7 +7648,7 @@ half the width, from black to white:
<article id="Snap.load"> <article id="Snap.load">
<header> <header>
<h3 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 3239 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3239">&#x27ad;</a></h3> <h3 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 3268 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3268">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.load-extra"></div> <div class="extra" id="Snap.load-extra"></div>
@ -7618,7 +7697,7 @@ half the width, from black to white:
<article id="Snap.getElementByPoint"> <article id="Snap.getElementByPoint">
<header> <header>
<h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3736 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3736">&#x27ad;</a></h3> <h3 class="dr-method">Snap.getElementByPoint(x, y)<a href="#Snap.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3765 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3765">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.getElementByPoint-extra"></div> <div class="extra" id="Snap.getElementByPoint-extra"></div>
@ -7703,7 +7782,7 @@ half the width, from black to white:
<article id="Snap.plugin"> <article id="Snap.plugin">
<header> <header>
<h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3771 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3771">&#x27ad;</a></h3> <h3 class="dr-method">Snap.plugin(f)<a href="#Snap.plugin" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to line 3800 in the source" href="https://github.com/adobe-webplatform/Snap.svg/blob/master/src/svg.js#L3800">&#x27ad;</a></h3>
</header> </header>
<section> <section>
<div class="extra" id="Snap.plugin-extra"></div> <div class="extra" id="Snap.plugin-extra"></div>

31
src/svg.js
View File

@ -2940,7 +2940,6 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
} }
return el; return el;
}; };
// SIERRA Paper.g(): Don't understand the code comment about the order being _different._ Wouldn't it be a rect followed by a circle?
/*\ /*\
* Paper.g * Paper.g
[ method ] [ method ]
@ -2975,6 +2974,36 @@ function gradientRadial(defs, cx, cy, r, fx, fy) {
} }
return el; return el;
}; };
/*\
* Paper.svg
[ method ]
**
* Creates a nested SVG element.
- width (number) @optional width of the element
- height (number) @optional height of the element
- x (number) @optional viewbox X
- y (number) @optional viewbox Y
- w (number) @optional viewbox width
- h (number) @optional viewbox height
**
= (object) the `svg` element
**
\*/
proto.svg = function (width, height, x, y, w, h) {
var el = make("svg", this.node),
attrs = {};
if (width != null) {
attrs.width = width;
}
if (height != null) {
attrs.height = height;
}
if (x != null && y != null && w != null && h != null) {
attrs.viewBox = [x, y, w, h];
}
el.attr(attrs);
return el;
};
/*\ /*\
* Paper.text * Paper.text
[ method ] [ method ]

20
test/paper.js
View File

@ -57,6 +57,26 @@ describe("Paper methods", function () {
paper.remove(); paper.remove();
}); });
it("Paper.svg", function() {
var c = paper.svg();
expect(c.node.nodeName).to.be("svg");
expect(c.node.parentNode).to.be(paper.node);
});
it("Paper.svg(x, y)", function() {
var c = paper.svg(100, 200);
expect(c.node.nodeName).to.be("svg");
expect(c.node.width.baseVal.value).to.be(100);
expect(c.node.height.baseVal.value).to.be(200);
expect(c.node.parentNode).to.be(paper.node);
});
it("Paper.svg(x, y, viewbox)", function() {
var c = paper.svg(100, 200, 10, 20, 30, 40);
expect(c.node.nodeName).to.be("svg");
expect(c.node.width.baseVal.value).to.be(100);
expect(c.node.height.baseVal.value).to.be(200);
expect(c.node.getAttribute("viewBox")).to.be("10 20 30 40");
expect(c.node.parentNode).to.be(paper.node);
});
it("Paper.el", function() { it("Paper.el", function() {
var c = paper.el("circle"); var c = paper.el("circle");
expect(c.node.nodeName).to.be("circle"); expect(c.node.nodeName).to.be("circle");