Search code examples
javascripthtmlcsssvg

Why do SVG elements generated in JavaScript not have the same sizing as SVG elements defined directly in HTML?

I have buttons with SVG icons inside them that are added to the page using JavaScript. I would like these icons to behave as SVGs typically would in any other situation - obeying the CSS rules. However, when the buttons are generated, the sizing of the SVG (and the path within it) is strange - always 300px x 150px, which does not match the dimensions of the defined viewBox (in this case, 0 0 24 24) and is not influenced by any CSS. The path comes out at 24x24 pixels in the top right corner of this container and does not scale with the SVG container or the button element above that.

https://jsfiddle.net/zbsdum28/

If this exact same element is directly declared in HTML instead, it appears as expected - with the SVG matching the dimensions of the button element that it is placed in.

https://jsfiddle.net/cu9t3gsx/

I've tried adding various different CSS styles to try and account for this, and changing the attributes of the SVG, but while the SVG element does react, the path within it does not, remaining the same size. I assume the issue is with the way I am creating the element in JavaScript, but I don't know why and I've not been able to find any way to correct it.

var controls = true

if (controls == true) {
  // generate the reset button
  var resetSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  var resetSvgPath = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "path",
  );

  resetSvg.setAttribute("class", "icon reset-icon");

  resetSvg.setAttribute("viewbox", "0 0 24 24");

  resetSvg.setAttribute("preserveAspectRatio", "xMinYMax meet");

  resetSvg.setAttribute("fill-rule", "evenodd");

  resetSvg.setAttribute("clip-rule", "evenodd");

  resetSvgPath.setAttribute(
    "d",
    "M2.458 9.012c-.297.947-.458 1.955-.458 3 0 5.52 4.481 10 10 10 5.52 0 10-4.48 10-10 0-5.519-4.48-10-10-10-2.121 0-4.083.668-5.703 1.796l1.703 2.204h-6.58l1.935-6.012 1.718 2.223c1.958-1.389 4.346-2.211 6.927-2.211 6.623 0 12 5.377 12 12s-5.377 11.988-12 11.988-12-5.365-12-11.988c0-1.036.132-2.041.379-3h2.079zm10.35-3.012c.292.821.375 1.346 1.01 1.609.637.264 1.073-.052 1.854-.423l1.142 1.142c-.373.787-.687 1.218-.423 1.854.262.634.784.716 1.609 1.009v1.617c-.816.29-1.347.375-1.61 1.01-.264.636.052 1.071.424 1.853l-1.142 1.142c-.79-.375-1.219-.687-1.85-.424-.639.265-.723.793-1.014 1.611h-1.616c-.292-.821-.375-1.347-1.01-1.61-.637-.264-1.072.052-1.854.423l-1.142-1.142c.366-.771.689-1.212.423-1.854-.263-.635-.793-.719-1.609-1.009v-1.617c.817-.29 1.346-.373 1.609-1.009.264-.637-.051-1.07-.423-1.854l1.142-1.142c.788.374 1.218.687 1.854.423.635-.263.719-.792 1.01-1.609h1.616zm-.808 8c-1.105 0-2-.896-2-2 0-1.105.895-2.001 2-2.001 1.104 0 2 .896 2 2.001 0 1.104-.896 2-2 2z",
  );

  resetSvg.appendChild(resetSvgPath);

  var resetButton = document.createElement("button");

  resetButton.classList.add("reset-button");

  resetButton.appendChild(resetSvg);

  document.body.appendChild(resetButton);
}
button {
  width: 5rem;
}

Solution

  • The issue is that you have misspelled the property key viewBox as viewbox in your JS code, so the SVG that you are generating does not actually have a valid viewBox, even though it looks like it does if you inspect the DOM and do not notice the subtle difference.

    So, change:

    resetSvg.setAttribute("viewbox", "0 0 24 24");

    To:

    resetSvg.setAttribute("viewBox", "0 0 24 24");