Question

##我必须在svg（svg命名空间）里面的路径中附加文本。我需要做的它动态所以我写了所有的javascript函数。有可能为使用内部文本标记附加文本但我需要附加它动态地在命名空间中创建svg.Following是我试过的示例代码。这包括带箭头的路径附加到它，我需要将文本数据附加到此路径。一些请帮我。 http://jsfiddle.net/2ygz14rv/1/ ##

var NS="http://www.w3.org/2000/svg"; 
var SVG=function(h,w){ // fun create SVG
var svg=document.createElementNS(NS,"svg");
svg.width=w;
svg.height=h; 
createMarkerDef(svg);
return svg;
}
var arrow= function(){                   // fun for arrow 
var arrowObj=document.createElementNS(NS,"path"); 
arrowObj.setAttributeNS(null, "id", "markerArrow");
arrowObj.setAttributeNS(null, "d","M0,0 L10,5 L0,10 L1,5" );
      return arrowObj;
    }

var svg=SVG(500,500);
document.body.appendChild(svg);
var lines= function(mx,my,lx,ly){        // lines
newpath=document.createElementNS(NS,"path");  
newpath.setAttributeNS(null, "id", "MyPath");  
newpath.setAttributeNS(null,"d",'M'+mx+' '+my+' L'+lx+' '+ly);  
newpath.setAttributeNS(null, "stroke", "black"); 
newpath.setAttributeNS(null, "stroke-width",2);   
newpath.setAttributeNS(null, "fill", "none");
newpath.setAttributeNS(null,'marker-end','url(#markerArrow1)');

    return newpath;
}
var l=lines(80,140,180,100);
    svg.appendChild(l);  
var weight = text1();
svg.appendChild(weight);  
function createMarkerDef(svg) {
    var defs = document.createElementNS(NS, 'defs');
    var markerObj = document.createElementNS(NS,"marker");
    markerObj.setAttributeNS(null, "id", "markerArrow1");
    markerObj.setAttributeNS(null, "viewBox", "0 0 10 10" );
    markerObj.setAttributeNS(null, "refX", "1");
    markerObj.setAttributeNS(null, "refY", "5");
    markerObj.setAttributeNS(null, "markerWidth", "10" );
    markerObj.setAttributeNS(null, "markerHeight", "10");
    markerObj.setAttributeNS(null, "markerUnits","strokeWidth");
    markerObj.appendChild(arrow());
    defs.appendChild(markerObj);
    svg.appendChild(defs);
  }

如何动态地在命名空间svg路径中附加文本？

0 个答案: