diff --git a/svgjs/svgjs-tests.ts b/svgjs/svgjs-tests.ts
new file mode 100644
index 000000000..845702ac4
--- /dev/null
+++ b/svgjs/svgjs-tests.ts
@@ -0,0 +1,69 @@
+///
+///
+
+// create svg drawing paper
+
+
+// Example from svgjs.com
+function one() {
+ var draw = SVG('canvas')
+
+ // create image
+ var image = draw.image('images/shade.jpg')
+ image.size(600, 600).y(-150)
+
+ // create text
+ var text = draw.text('SVG.JS').move(300, 0)
+ text.font({
+ family: 'Source Sans Pro'
+ , size: 180
+ , anchor: 'middle'
+ , leading: '1em'
+ })
+
+ // clip image with text
+ image.clipWith(text)
+}
+
+
+// random one I found online
+function two() {
+ var draw = SVG('paper').size(300, 300)
+ var rect = draw.rect(100, 100).attr({ fill: '#f06' })
+ rect.animate().move(150, 150)
+}
+
+
+// Ripped out of a project.
+function renderSVG(data:string) {
+
+ var el:JQuery;
+
+ var root = SVG(el.get(0))
+
+ // Load the SVG into a container
+ var div = document.createElement("div")
+ var container = SVG(div) // this creates an SVG tag inside
+ container.svg(data) // this creates an SVG inside the SVG
+ var $inner = $(div).find("svg svg")
+ var inner:svgjs.Element = $inner.get(0).instance
+
+ // Copy in the important attributes
+ root.attr('x', inner.attr('x'))
+ root.attr('y', inner.attr('y'))
+ root.attr('width', inner.attr('width'))
+ root.attr('height', inner.attr('height'))
+ root.viewbox(inner.viewbox())
+
+ // Append the children
+ el.append($inner.children())
+
+ // Activate and Label all child paths
+ var index = 0
+ el.find("rect, path, circle, ellipse").each(function() {
+ var $path = $(this)
+ var path = $path.get(0).instance
+ var uniqueId = "path"+index++
+ path.attr({"path-id": uniqueId})
+ })
+}
\ No newline at end of file
diff --git a/svgjs/svgjs.d.ts b/svgjs/svgjs.d.ts
index a338ae141..6b7a7a6ae 100644
--- a/svgjs/svgjs.d.ts
+++ b/svgjs/svgjs.d.ts
@@ -25,7 +25,7 @@ declare module svgjs {
extend(parent:Object, obj:Object):void;
}
- export interface Doc extends Parent {
+ export interface Doc extends Element {
svg(data:string):any;
pattern(w:number, h:number, add:(e:Element)=>void):Element;
@@ -40,7 +40,7 @@ declare module svgjs {
// TODO gradients
}
- export interface Element {
+ export interface Element extends Text, Parent {
node:LinkedHTMLElement;
nested():Doc;
@@ -130,14 +130,13 @@ declare module svgjs {
add(element:Element):Mask;
}
- export interface Text extends Element {
- text(text:string):Text;
+ export interface Text {
content:string;
- font(font:{family?:string; size?:number; anchor?:string; leading?:string}):Text;
- tspan(text:string):Text;
- path(data:string):Text;
- plot(data:string):Text;
- track:Text;
+ font(font:{family?:string; size?:number; anchor?:string; leading?:string}):Element;
+ tspan(text:string):Element;
+ path(data:string):Element;
+ plot(data:string):Element;
+ track:Element;
}
export interface ElementStatic extends Parent {
@@ -172,9 +171,9 @@ declare module svgjs {
// TODO style, etc, bbox...
}
- export interface Parent extends Element {
+ export interface Parent {
put(element:Element, i?:number):Element;
- add(element:Element, i?:number):Parent;
+ add(element:Element, i?:number):Element;
children:Element[];
rect(w:number, h:number):Element;
@@ -186,11 +185,11 @@ declare module svgjs {
polygon(data:string):Element;
polygon(points:number[][]):Element;
path(data:string):Element;
- image(url:string, w:number, h:number):Element;
- text(text:string):Text;
- text(adder:(element:Text)=>void):Element;
+ image(url:string, w?:number, h?:number):Element;
+ text(text:string):Element;
+ text(adder:(element:Element)=>void):Element;
- group():Parent;
+ group():Element;
}
export interface BBox {