Question

https://jsfiddle.net/0hh4rkso/12/这就是我的尝试。我需要在矩形连接线中添加箭头标记。我需要动态地执行它，所以我将所有内容写为javascript函数，如下所示。在给定大小的中间我正在绘制矩形并且它与线元素连接。但是我无法在行中添加箭头。有一个请给出任何解决方案。

var SVG=function(h,w){             // fun create SVG
var svg=document.createElementNS(NS,"svg");
  svg.width=w;
  svg.height=h; 
  return svg;
}
var rect=function(x,y,h,w){        // fun create Rectangle
   var rectSVGObj = document.createElementNS(NS, 'rect');
   rectSVGObj.setAttributeNS(null, "id", "rectId");
   rectSVGObj.setAttributeNS(null, 'x',x);
   rectSVGObj.setAttributeNS(null, 'y', y);
   rectSVGObj.setAttributeNS(null, 'height', h);
   rectSVGObj.setAttributeNS(null, 'width', w);
   rectSVGObj.setAttributeNS(null, 'fill', 'none');
   rectSVGObj.setAttributeNS(null, "stroke", "black");
  return rectSVGObj;
}
var arrow= function(){                   // fun for arrow 

  var markerObj = document.createElementNS(NS,"marker");
  markerObj.setAttributeNS(null, "id", "markerArrow1");   
  var arrowObj=document.createElementNS(NS,"path"); 
  arrowObj.setAttributeNS(null, "id", "markerArrow");
  arrowObj.setAttributeNS(null, "d","M2,2 L2,13 L8,7 L2,2" );
  markerObj.appendChild(arrowObj);
return markerObj;
}
var lines= function(x1,y1,x2,y2){        // lines
   var lineSVGObj = document.createElementNS(NS, 'line');
   lineSVGObj.setAttributeNS(null, "id", "lineId");
   lineSVGObj.setAttributeNS(null, 'x1',x1);
   lineSVGObj.setAttributeNS(null, 'y1', y1);
   lineSVGObj.setAttributeNS(null, 'x2', x2);
   lineSVGObj.setAttributeNS(null, 'y2', y2);
   lineSVGObj.setAttributeNS(null, "stroke", "blue");
   lineSVGObj.setAttributeNS(null,'marker-mid',        'url(#markerArrow1)');
return lineSVGObj;
}
var svg=SVG(height,width);
  document.body.appendChild(svg);      // append svg to body
 var markerArrw =arrow();
  svg.appendChild(markerArrw);
  x=cx; y=cy; 
  var r= rect(x,y,rheight,rwidth);    
  svg.appendChild(r);                 // append rect1 to svg

 // Input rects plote
var lx2=arrowpoint_x;
var ly2=arrowpoint_y;
var irect_x=0;
var irect_y=0;
for(var i=1;i<=limit;i++){         // append inputs rect+line
    irect_x=cx-(cx/2);
    irect_y=cy; 
if (i%2== 0){
     irect_y=(irect_y-(irh*i))+20;

  }else{  
     irect_y= (irect_y+(irh*i))-20;
  }  

    var irect= rect(irect_x,irect_y,irh,irw);
    svg.appendChild(irect);  
    var lx1=irect_x+irw;
    var ly1=irect_y+(irh/2);
    var l=lines(lx1,ly1,lx2,ly2);
    svg.appendChild(l);
   }

Answer 1

按照给出的SVG marker示例。如果您将其添加到2>&1部分并稍后引用它就可以了。我已经使用代码更新了小提琴，但无法查看它是否设置为defs，marker-mid＆amp; marker-start似乎有效。

https://jsfiddle.net/0hh4rkso/10/

Answer 2

scanf("%c", &find);个元素只有一个开头和一个结尾，中间没有顶点可供标记中间标记绘制。

您还要创建具有相同ID的多个元素，这会让您遇到麻烦。

如何仅使用svg HTML5动态追加箭头标记

2 个答案: