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 {