SVG created with JS is clipped

Question

This svg code:

<div style="width: 25%; height: 100%; position: relative; background-color: orange;">
  <svg viewbox="0 0 1 1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
    <circle cx="50%" cy="50%" r="50%" fill="teal" style="pointer-events: all;">
    </circle>
  </svg>
</div>

produces this image:

And was generated with this code:

this.$el = document.createElement('div');
document.body.appendChild(this.$el);
this.$svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
this.$el.appendChild( this.$svg );
this.$circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
this.$svg.appendChild(this.$circle);

this.$el.style.width = '25%';
this.$el.style.height = '100%';
this.$el.style.position = 'relative';
this.$el.style.backgroundColor = 'orange';

this.$svg.setAttributeNS(null, 'viewbox', '0 0 1 1');
this.$svg.setAttributeNS(null, 'width', '100%');
this.$svg.setAttributeNS(null, 'height', '100%');
this.$svg.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet');

this.$circle.setAttributeNS(null, 'cx', '50%');
this.$circle.setAttributeNS(null, 'cy', '50%');
this.$circle.setAttributeNS(null, 'r', '50%');
this.$circle.setAttributeNS(null, 'fill', 'teal');

However, when this code is run and populates the DOM, it renders like this:

Copying and pasting the exact same just generated SVG code into the DOM renders the SVG as expected. What is going on here? How to get the dynamically generated SVG to render correctly?

Here is the issue on codepen:

http://codepen.io/jedierikb/pen/VPzpwj

---

To see the rendering problem, be sure to press 'Expand snippet' or 'Full Page':

 this.$el = document.createElement('div'); document.body.appendChild(this.$el); this.$svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.$el.appendChild( this.$svg ); this.$circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); this.$svg.appendChild(this.$circle); this.$el.style.width = '25%'; this.$el.style.height = '100%'; this.$el.style.position = 'relative'; this.$el.style.backgroundColor = 'orange'; this.$svg.setAttributeNS(null, 'viewbox', '0 0 1 1'); this.$svg.setAttributeNS(null, 'width', '100%'); this.$svg.setAttributeNS(null, 'height', '100%'); this.$svg.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet'); this.$circle.setAttributeNS(null, 'cx', '50%'); this.$circle.setAttributeNS(null, 'cy', '50%'); this.$circle.setAttributeNS(null, 'r', '50%'); this.$circle.setAttributeNS(null, 'fill', 'teal'); 

 <div style="width: 25%; height: 100%; position: relative; background-color: orange;"> <svg viewbox="0 0 1 1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"> <circle cx="50%" cy="50%" r="50%" fill="teal" style="pointer-events: all;"> </circle> </svg> </div> 

Answer 1

Two things. Firstly, your percentage height is not actually doing anything because the parent elements (body and html) do not have a specified height. However, since this is consistent for both examples, this isn't the source of the disparity. You have a capitalization error in this line:

this.$svg.setAttributeNS(null, 'viewbox', '0 0 1 1');

should be

this.$svg.setAttributeNS(null, 'viewBox', '0 0 1 1');

See your example with this change made:

 this.$el = document.createElement('div'); document.body.appendChild(this.$el); this.$svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); this.$el.appendChild( this.$svg ); this.$circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); this.$svg.appendChild(this.$circle); this.$el.style.width = '25%'; this.$el.style.height = '100%'; this.$el.style.position = 'relative'; this.$el.style.backgroundColor = 'orange'; this.$svg.setAttributeNS(null, 'viewBox', '0 0 1 1'); this.$svg.setAttributeNS(null, 'width', '100%'); this.$svg.setAttributeNS(null, 'height', '100%'); this.$svg.setAttributeNS(null, 'preserveAspectRatio', 'xMidYMid meet'); this.$circle.setAttributeNS(null, 'cx', '50%'); this.$circle.setAttributeNS(null, 'cy', '50%'); this.$circle.setAttributeNS(null, 'r', '50%'); this.$circle.setAttributeNS(null, 'fill', 'teal'); 

 <div style="width: 25%; height: 100%; position: relative; background-color: orange;"> <svg viewbox="0 0 1 1" width="100%" height="100%" preserveAspectRatio="xMidYMid meet"> <circle cx="50%" cy="50%" r="50%" fill="teal" style="pointer-events: all;"> </circle> </svg> </div>