I am trying to programatically create a rounded corner using Javascript and SVG. The corner is created successfully, but the path is always set to 0 width and 0 height.

If I copy the created string element and paste it into a file then it works without any problem as shown in the second line of the snippet.

Why is only the programatically created path without width and height? What am I missing?

var cornerTopLeft = createCorner("top-left");
applyCornerStyles.call(cornerTopLeft, 0, 0, 10);

var body = document.getElementsByTagName("body")[0];
body.appendChild(cornerTopLeft);

function createCorner(cornerPosition) {
  var corner = document.createElement("svg");
  corner.setAttribute("fill", "red");
  corner.setAttribute("style", "width:10px;height:10px;background-color: red;");
  corner.setAttribute("viewBox", "0 0 100 100");
  corner.setAttribute("xmlns", "")
  corner.innerHTML = '<path class="" style="background-color: rgba(0, 0, 0, .5);fill: rgba(0, 0, 0, .5);" d="M100 0 ,Q 0 0 0 100, L0 0, Z"></path>';
  return corner;
}

function applyCornerStyles(top, left, size) {
  this.style.top = top + "px";
  this.style.left = left + "px";
  this.style.width = size + "px";
  this.style.height = size + "px";
  this.style.zIndex = "20002";
  this.style.position = "absolute";
}

<h3>This svg was created using svg string created programatcally.</h3>
<svg fill="none" viewbox="0 0 100 100" xmlns="" style="top: 22px; left: 510px; width: 10px; height: 10px; z-index: 20001; position: absolute;">
  <path class="" style="background-color: rgba(0, 0, 0, .5);fill: rgba(0, 0, 0, .5);" d="M100 0 ,Q 0 0 0 100, L0 0, Z"></path>
</svg>

I am trying to programatically create a rounded corner using Javascript and SVG. The corner is created successfully, but the path is always set to 0 width and 0 height.

If I copy the created string element and paste it into a file then it works without any problem as shown in the second line of the snippet.

Why is only the programatically created path without width and height? What am I missing?

var cornerTopLeft = createCorner("top-left");
applyCornerStyles.call(cornerTopLeft, 0, 0, 10);

var body = document.getElementsByTagName("body")[0];
body.appendChild(cornerTopLeft);

function createCorner(cornerPosition) {
  var corner = document.createElement("svg");
  corner.setAttribute("fill", "red");
  corner.setAttribute("style", "width:10px;height:10px;background-color: red;");
  corner.setAttribute("viewBox", "0 0 100 100");
  corner.setAttribute("xmlns", "http://www.w3/2000/svg")
  corner.innerHTML = '<path class="" style="background-color: rgba(0, 0, 0, .5);fill: rgba(0, 0, 0, .5);" d="M100 0 ,Q 0 0 0 100, L0 0, Z"></path>';
  return corner;
}

function applyCornerStyles(top, left, size) {
  this.style.top = top + "px";
  this.style.left = left + "px";
  this.style.width = size + "px";
  this.style.height = size + "px";
  this.style.zIndex = "20002";
  this.style.position = "absolute";
}

<h3>This svg was created using svg string created programatcally.</h3>
<svg fill="none" viewbox="0 0 100 100" xmlns="http://www.w3/2000/svg" style="top: 22px; left: 510px; width: 10px; height: 10px; z-index: 20001; position: absolute;">
  <path class="" style="background-color: rgba(0, 0, 0, .5);fill: rgba(0, 0, 0, .5);" d="M100 0 ,Q 0 0 0 100, L0 0, Z"></path>
</svg>

(fiddle)

• javascript
• html
• svg

• Try setting corner.setAttribute("width", "10"), and same for height, instead of adding them to the style attr – Raul Rene Commented Feb 19, 2019 at 14:06
• Thanks for stopping by. It does not work unfortunately – potato Commented Feb 19, 2019 at 14:09

2 Answers 2

In order to create a new svg element you need to use document.createElementNS instead of document.createElement. Also you need to create the path with document.createElementNS. corner.innerHTML = '<path class=... won't do.

const SVG_NS = 'http://www.w3/2000/svg';

var cornerTopLeft = createCorner("top-left");
applyCornerStyles.call(cornerTopLeft, 0, 0, 10);

var body = document.getElementsByTagName("body")[0];
body.appendChild(cornerTopLeft);

function createCorner(cornerPosition) {
  var corner = document.createElementNS(SVG_NS, 'svg');
  corner.setAttributeNS(null,"fill", "red");
  corner.setAttribute("class","corner")
  corner.setAttributeNS(null,"viewBox", "0 0 100 100");
  //corner.setAttribute("xmlns", "http://www.w3/2000/svg")
  var path = document.createElementNS(SVG_NS, 'path');
  path.setAttributeNS(null,"fill", "rgba(0, 0, 0, .5)");
  path.setAttributeNS(null,"d","M100 0 ,Q 0 0 0 100, L0 0, Z");
  corner.appendChild(path)
  return corner;
}




function applyCornerStyles(top, left, size) {
  this.style.top = top + "px";
  this.style.left = left + "px";
  this.style.width = size + "px";
  this.style.height = size + "px";
  
  this.style.position = "absolute";
}

svg{border:1px solid}

.corner{background-color: red;}

<h3>This svg was created using svg string created programatcally.</h3>
<svg fill="none" viewbox="0 0 100 100" xmlns="http://www.w3/2000/svg" style="top: 22px; left: 510px; width: 10px; height: 10px; z-index: 20001; position: absolute;">
  <path class="" style="background-color: rgba(0, 0, 0, .5);fill: rgba(0, 0, 0, .5);" d="M100 0 ,Q 0 0 0 100, L0 0, Z"></path>
</svg>

Use var corner = document.createElementNS("http://www.w3/2000/svg", "svg"); instead of var corner = document.createElement("svg");