SVG is empty when manipulating with javascript

Question

I'm working on a enyo application. I want to draw on a svg. This is my code so far:

enyo.kind({
    name:"draw",
    kind:enyo.Control,
    tag:"svg",
    attributes:{
        xmlns:"http://www.w3.org/2000/svg",
        version:"1.1"
    },
    classes:"drawSvg",
    published:{
        drawSize:5,
        selectedColor:"333333",
        paths:0
    },
    handlers:{
        ondown:"onDownHandler",
        onmove:"onMoveHandler"
    },

    create:function(){
        this.inherited(arguments);
        this.render();
    },
    rendered:function(){
        this.inherited(arguments);
    },

    onDownHandler:function(sender,target){
        this.iPaths++;
        var p = this.getPositionInSvg(target);
        var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        path.setAttribute('class', 'drawpath'+ this.iPaths);
        path.setAttribute('fill', 'none');
        path.setAttribute('stroke', '#'+this.getSelectedColor());
        path.setAttribute('stroke-width', this.getDrawSize());
        path.setAttribute('d', "M " + p.x + "," + p.y);

        $(this.hasNode()).append(path);
    },

    onMoveHandler:function(sender,target){
        var p = this.getPositionInSvg(target);
        $('. drawpath'+ this.iPaths).attr("d", $('. drawpath'+ this.iPaths).attr("d") + " L "+ p.x+","+ p.y);
    },

    getPositionInSvg:function(target){
        var pos = new Object();
        pos.x = ((target.pageX - this.hasNode().offsetLeft) / window.settings.SCALE) + 0.5>>0;
        pos.y = ((target.pageY - $(this.hasNode()).offset().top) / window.settings.SCALE) + 0.5>>0;
        return pos;
    }
});

When I look at the generated HTML code in firebug. This is the code:

<svg id="frame_view1_drawSvg" class="drawSvg" xmlns="http://www.w3.org/2000/svg" 
version="1.1" style="left: 62px; top: 0px; height: 877px; width: 1403px; 
pointer-events: auto; cursor: none;">
<path class="drawpath1" fill="none" stroke="#333333" stroke-width="5" d="M 795,597 
L 795,599 L 795,601 L 795,603 L 793,606 L 785,609 L 767,617 L 742,623 L 713,629 
L 640,634 L 616,636 L 579,634 L 549,630 L 530,622 L 513,611 L 495,597 L 485,588 
L 477,581 L 474,577 L 473,576 L 472,575 L 466,572 L 452,566 L 436,557 L 420,543 
L 410,526 L 404,502 L 404,491 L 416,487 L 452,484 L 499,494 L 537,513 L 573,538 
L 588,554 L 591,557 L 591,556 L 583,551 L 570,542 L 553,525 L 531,504 L 523,496 
L 521,495 L 521,494 L 521,494 L 522,494">
<path class="drawpath2" fill="none" stroke="#333333" stroke-width="5" d="M 1166,136 
L 1166,137 L 1164,135 L 1162,135 L 1157,134 L 1148,131 L 1128,129 L 1117,124 
L 1107,122 L 1099,119 L 1096,119 L 1094,117 L 1092,117 L 1092,118 L 1092,119 
L 1093,120 L 1095,125 L 1096,129 L 1096,133 L 1096,139 L 1096,141 L 1237,139 
L 1234,140 L 1227,142 L 1219,145 L 1203,151 L 1190,154 L 1172,160 L 1157,162 
L 1148,164 L 1145,164 L 1142,164 L 1139,165 L 1138,167 L 1138,168 L 1138,169 
L 1138,169 L 1139,169 L 1144,169 L 1148,170 L 1149,170 L 901,317 L 901,317 
L 901,317 L 899,326 L 899,327 L 898,331 L 896,336">
</svg>

I think the generated code looks good. But I don't see anything in the svg. Nothing is rendered and the svg is empty.

Answer 1

I verified with the nightly Enyo that I can do a very simple SVG test.

http://jsfiddle.net/sugardave/4wXWv/

Declaring

{name: "svg", tag: "svg", attributes: {xmlns: "http://www.w3.org/2000/svg", version: "1.1"}}

in the app kind works just fine, I didn't try it as a standalone kind.

Answer 2

In your SVG, path tag must be a self closing tag. You can use the online tools like w3c to find errors in the markup validity of your SVG.

I don't have your full code to check, but I would suggest that in your onDownHandler:function, try using $(this.hasNode()).appendChild(path);

Here is a fiddle to generate first line in your SVG: http://jsfiddle.net/e9RkY/1/

Answer 3

I haven't had time to investigate but I will update this answer when I do. But my recollection from working on the SVG example in the book is that you can't just modify the node of the SVG object once it's rendered. You'll probably need to either set functions into the SVG or go with a different approach to modifying the node. See this and see if it helps: update SVG dynamically