使用javascript操作時SVG爲空

我正在使用enyo應用程序。我想借鑑一個SVG。這是我到目前爲止的代碼：使用javascript操作時SVG爲空

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; 
    } 
});

當我看到在螢火生成的HTML代碼。這是代碼：

<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>

我想生成的代碼看起來不錯。但我在svg中沒有看到任何東西。什麼都沒有呈現，並且svg是空的。

來源

2013-04-18 Dimitri

我通過每晚Enyo驗證我可以做一個非常簡單的SVG測試。

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

在應用一種聲明

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

工作得很好，我沒有嘗試，作爲一個獨立的一種。

來源

2013-04-18 15:49:43 sugardave

謝謝，我做了enyo.kind一個div而不是svg en作爲一個組件添加了你的代碼。 – Dimitri

在你的SVG，path tag必須是自關閉標籤。您可以使用在線工具（如w3c）來查找SVG標記有效性中的錯誤。

我沒有完整的代碼來檢查，但我建議你onDownHandler：功能，嘗試使用$(this.hasNode()).appendChild(path);

下面是一個小提琴產生在你的SVG第一行：http://jsfiddle.net/e9RkY/1/

來源

2013-04-18 08:24:17

'.appendChild'不是一個jquery函數。所以我嘗試了 'this.hasNode（）。appendChild（path）;' 但是仍然沒有結束標籤。 – Dimitri

我還沒有時間進行調查，但我會在此時更新此答案。但是我從本書中的SVG示例中回想起來，您不能只是在呈現SVG對象後修改其節點。您可能需要將函數設置到SVG中，或者使用不同的方法來修改節點。看看這個，看看它是否有幫助：update SVG dynamically

來源

2013-04-19 04:48:11 Pre101

使用javascript操作時SVG爲空

回答

相關問題