SVG is empty when manipulating with javascript -
i'm working on enyo application. want draw on svg. code 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 @ generated html code in firebug. 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 generated code looks good. don't see in svg. nothing rendered , svg empty.
i verified nightly enyo can 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 app kind works fine, didn't try standalone kind.
Comments
Post a Comment