SVG создается с JS обрезается

Question

Этот код SVG:

<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> 

производит это изображение:

И был сгенерирован с этим кодом:

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'); 

Однако, когда этот код запускается и заполняет DOM, он делает следующее:

Копирование и вставка в точно так же просто сгенерированный код SVG в DOM делает SVG, как ожидалось. Что здесь происходит? Как получить динамически генерируемый SVG для правильной визуализации?

Вот вопрос о codepen:

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

---

Чтобы увидеть проблему визуализации, не забудьте нажать 'Развернуть фрагмент' или '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

Два тонких гс. Во-первых, ваш процентный рост на самом деле ничего не делает, потому что родительские элементы (тело и html) не имеют указанной высоты. Однако, поскольку это является последовательным для обоих примеров, это не является источником несоответствия. У вас есть ошибка капитализации в этой строке:

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

должен быть

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

Смотрите ваш пример с этим изменением, внесенным:

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>