CODEWITHSUNDEEP
javascripthtmlsvgdomd3.js
Nikhil
Nikhil

Reputation: 23

JavaScript/HTML - SVG Arrowhead not showing up on line element

I want to create a line with an arrowhead. The line element is contained in a group container in an SVG. I'm using the following code to add the arrow head definition to the SVG.

var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
var marker = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "marker"
);
marker.setAttributeNS(null, "id", "triangle");
marker.setAttributeNS(null, "refX", 10);
marker.setAttributeNS(null, "refY", 5);
marker.setAttributeNS(null, "markerUnits", 110);
marker.setAttributeNS(null, "markerWidth", 100);
marker.setAttributeNS(null, "markerHeight", 100);
marker.setAttributeNS(null, "orient", "auto");
var path = document.createElementNS("http;//www.w3.org/2000/svg", "path");
path.setAttributeNS(null, "stroke", "black");
path.setAttributeNS(null, "d", "M 0 0 L 10 5 L 0 10 z");
marker.appendChild(path);
defs.appendChild(marker);
currentSVG.appendChild(defs);

However, the arrow head is not showing up. It shows up only when I open the developer tools and edit the marker defition as SVG and change it slightly to make a change. Without editing in the developer tools, the SVG definiton and the marker-end although present does not show an arrow head.

Upvotes: 0

Views: 160

Answers (1)

ITDW
ITDW

Reputation: 158

You have a mistake where you typed a semicolon instead of a colon.

var path = document.createElementNS(“http; << here

Upvotes: 1

Related Questions