From e2e5a088c56926979c36d30e86bfc0969cc1fa7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A2=E6=A1=82=E7=BA=B2?= Date: Sun, 22 Apr 2018 02:09:13 +0800 Subject: [PATCH] svg not display??? --- viz/ts/svg/svg/svg/Utils.ts | 3 +++ viz/ts/svg/svg/svg/svg.ts | 21 ++++++++++++++------- viz/ts/svg/svg/svg/test.html | 2 +- 3 files changed, 18 insertions(+), 8 deletions(-) diff --git a/viz/ts/svg/svg/svg/Utils.ts b/viz/ts/svg/svg/svg/Utils.ts index e309c2a..8bb242a 100644 --- a/viz/ts/svg/svg/svg/Utils.ts +++ b/viz/ts/svg/svg/svg/Utils.ts @@ -6,6 +6,9 @@ function componentToHex(c) { return hex.length == 1 ? "0" + hex : hex; } +/** + * jQuery equivalent on document ready handler. +*/ var $ = (fn: any) => { // Sanity check diff --git a/viz/ts/svg/svg/svg/svg.ts b/viz/ts/svg/svg/svg/svg.ts index f8cd1bb..d2d2692 100644 --- a/viz/ts/svg/svg/svg/svg.ts +++ b/viz/ts/svg/svg/svg/svg.ts @@ -17,22 +17,29 @@ class Graphics { */ constructor(div: string) { this.svg = document.createElement("svg"); + this.svg.setAttribute("version", "1.1"); + this.svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); + this.svg.setAttribute("xmlns:dc", "http://purl.org/dc/elements/1.1/"); + this.svg.setAttribute("xmlns:cc", "http://creativecommons.org/ns#"); + this.svg.setAttribute("xmlns:rdf", "http://www.w3.org/1999/02/22-rdf-syntax-ns#"); + this.svg.setAttribute("xmlns:svg", "http://www.w3.org/2000/svg"); + this.svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); + this.container = document.getElementById(div); + this.container.appendChild(this.svg); console.log(div); console.log(this.svg); console.log(this.container); - - this.container.appendChild(this.svg); } size(width: number, height: number): Graphics { - this.svg.setAttribute("width", width.toString()) - this.svg.setAttribute("height", height.toString()); + this.svg.setAttribute("width", width.toString() + "px"); + this.svg.setAttribute("height", height.toString() + "px"); return this; } - drawLine(pen: Pen, a: Point, b: Point): Graphics { + drawLine(pen: Pen, a: Point, b: Point, id: string = null, className: string = null): Graphics { return this; } @@ -40,8 +47,8 @@ class Graphics { drawRectangle(rect: Rectangle, border: Pen = new Pen(Color.Black(), 1), fill: Color = null, id: string = null, className: string = null): Graphics { var node = document.createElement("rect"); - node.id = id; - node.className = className; + if (id) node.id = id; + if (className) node.className = className; node.setAttribute("x", rect.left.toString()); node.setAttribute("y", rect.top.toString()); diff --git a/viz/ts/svg/svg/svg/test.html b/viz/ts/svg/svg/svg/test.html index 3d4deec..3a0132b 100644 --- a/viz/ts/svg/svg/svg/test.html +++ b/viz/ts/svg/svg/svg/test.html @@ -5,7 +5,7 @@ -
+
\ No newline at end of file