Javascript 初始化后向SVG行添加箭头

因此，我试图编写一个基于JavaScript的html文件。我已经完成了这段代码，它计算了我的线条需要绘制的位置，以及我想要的绘制方式。但是，我不知道如何将箭头添加到行的末尾。它们是SVG行，大小取决于我的计算。到目前为止，我检查的每个网站和问题都添加了箭头，方法是为箭头写一个字母，然后在初始化该行时添加该部分，如本例所示

<svg width="600px" height="100px">
<defs>
     <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" 
       orient="auto" markerUnits="strokeWidth">
       <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
     </marker>
</defs>

<line x1="50" y1="50" x2="250" y2="50" stroke="#000" stroke-width="5" 
 marker-end="url(#arrow)" />
</svg>

但是这些语句的末尾都没有分号，每次我试图在html代码中实现它们时，它都会崩溃

有没有办法将箭头添加到已创建的线中？如果是这样，我将如何将其融入我的代码中

这就是所讨论的功能。它处理所有的线条创建，然后将线条添加到SVG中，显示在我在别处绘制的网格上

x和y输入对应于用户单击的像素

function createFieldLine(x, y) {

            //The routine you will write to create an electric field line.  
            var d = 0.4; // d is the step size
            var x1; //plot line segment from (x1,y1) to (x2,y2)
            var y1;
            var x2;
            var y2;
            var cx;
            var cy;
            var eX = 0;
            var eY = 0;
            //var line;  //A variable needed below to create a line in the 
                     svg
            var g = document.createElementNS(svgNS, "g"); //Create a group 
                    in which to place the field line
            fieldLineGroup.appendChild(g);  //Append group to the svg

            var eMag = 0;

            for (i = 0; i < charges.length; i++) {
                x1 = x;
                y1 = y;
                cx = charges[i][0];
                cy = charges[i][1];
                charge = charges[i][2];

                eX = eX + ((9 * Math.pow(10, 9)) * (charge / Math.pow(10, 
                      9)) * (x1 - cx) / Math.pow(Math.sqrt(Math.pow(x1 - cx, 
                       2) + Math.pow(y1 - cy, 2)), 3));
                eY = eY + ((9 * Math.pow(10, 9)) * (charge / Math.pow(10, 
                        9)) * (y1 - cy) / Math.pow(Math.sqrt(Math.pow(x1 - 
                        cx, 2) + Math.pow(y1 - cy, 2)), 3));

                eMag = Math.abs(eMag + Math.sqrt(Math.pow(eX, 2) + 
                       Math.pow(eY, 2)));

                console.log(eX + "is an x component");
                console.log(eY + "is a y component");
                console.log(eMag + "is the magnitude of the field from " + 
               (i + 1) + "charges.");
            }

            x2 = x1 + eX * 1000;
            y2 = y1 + eY * 1000;

            line = document.createElementNS(svgNS, "line");
            line.setAttributeNS(null, "style", 
                       "fill:none;stroke:#000000;stroke-miterlimit:10;");
            line.setAttributeNS(null, "x1", xTranslated(x1));
            line.setAttributeNS(null, "y1", yTranslated(y1));
            line.setAttributeNS(null, "x2", xTranslated(x2));
            line.setAttributeNS(null, "y2", yTranslated(y2));
            line.style.strokeWidth = "2";
            g.appendChild(line);
 }

我认为这个函数可能会有一个修复方法。但如果有必要，这是我的全部文件

var svgNS=http://www.w3.org/2000/svg; var origin={x:5，y:5}//设置坐标系原点的位置 变量比例={x:1，y:1}//设置坐标系的比例 var宽度=500//设置栅格的宽度 var高度=400//设置栅格的高度 var chargeRadius=10//电荷半径 var费用=[[125250,6]，[175250，-3]//[x，y，q]坐标和每个电荷的大小。 //指向各种svg组的变量。 svg=document.getElementByIdsvg； gridLineGroup=document.getElementByIdgridLineGroup； chargeGroup=document.getElementByIdchargesGroup； fieldLineGroup=document.getElementByIdfieldLineGroup； 创建网格宽度、高度； 对于var chargeNum=0；chargeNum0{ circle.setAttributesNull，样式，填充：AAFFFF；笔划：000000；笔划斜接限制：10；； }否则{ circle.setAttributesNull，样式，填充：ffaaa；笔划：000000；笔划斜接限制：10；； } circle.setAttributesNull、cx、xTranslatedx； circle.setAttributesNull、cy、xTranslatedy； circle.setAttributesNull，r，chargeRadius； g、 儿童圈； var text=document.createElementNSsvgNS，text； text.setAttributesNull，transform，matrix10 0 1+xTranslatedx-7++yTranslatedy+2+； text.setAttributesNull，样式，字体大小：6pt； 如果q>0{ text.textContent=++q+C； }否则{ text.textContent=q+C； } g、 追加文本； } 函数createGridwidth、height{ var线； //水平线 对于var y=0；y标记end是一个所谓的，这意味着它既可以作为属性也可以作为样式属性写入。因此，编写带有箭头的行的最简单方法是定义一个样式化类：

var svgNS=http://www.w3.org/2000/svg; var line=document.createElementNSsvgNS，第行； line.setAttributeclass，箭头； line.setAttributex1，50；//名称空间仅用于创建元素 line.setAttributey1，05； line.setAttributex250； line.setAttributey2，05； var svg=document.getElementByIdsvg； svg.appendChildline； .阿罗{ 行程：000000； 笔画宽度：2； 标记端：urlarrow； }

---

只需使用def引用调用set属性值

功能改变{ var line2=document.getElementByIdline2； line2.setAttributemarker-end，URL箭头； } 改变