svg not display???

8 years ago · e2e5a088c5
parent 865eb0ddb7
commit e2e5a088c5
3 changed files with 18 additions and 8 deletions
--- 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
--- 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());
--- a/viz/ts/svg/svg/svg/test.html
+++ b/viz/ts/svg/svg/svg/test.html
@ -5,7 +5,7 @@
 </head>

 <body>
-    <div id="test-svg"></div>
+    <div id="test-svg" style="width:100%; height: 100%;"></div>
 </body>

 </html>