Не удалось создать svg

Question

Я пытаюсь создать svg, polyline используя javascript.

Хотя это правильно создает &, добавляя элементы, но polyline не рисует на экране.

var _button = document.createElement('button'); 
    _button.id = "scrollToTop"; 
    _button.class = ""; 

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
    svg.setAttribute('style', 'border: 1px solid black'); 
    svg.setAttribute('width', '600'); 
    svg.setAttribute('height', '250'); 
    svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); 

    var _polyline = document.createElement('polyline'); 
    _polyline.setAttribute("fill", "#006600"); 
    _polyline.setAttribute("stroke", "#FFFFFF"); 
    _polyline.setAttribute('stroke-width', '1'); 
    _polyline.setAttribute('stroke-linecap', 'round'); 
    _polyline.setAttribute('stroke-linejoin', 'round'); 
    _polyline.setAttribute("points", "10,52 60,52 35,0"); 

document.getElementById('scrollToTop').appendChild(svg).appendChild(_polyline); 

Пожалуйста, помогите решить эту проблему

JSFIDDLE

Answer 1

Вы просто забыли пространство имен:

var _polyline = document.createElementNS("http://www.w3.org/2000/svg", 'polyline'); 
_polyline.setAttribute("fill", "#006600"); 
_polyline.setAttribute("stroke", "#FFFFFF"); 
_polyline.setAttribute('stroke-width', '1'); 
_polyline.setAttribute('stroke-linecap', 'round'); 
_polyline.setAttribute('stroke-linejoin', 'round'); 
_polyline.setAttribute("points", "10,52 60,52 35,0"); 

Вот ваш рабочий код:

var _button = document.createElement('button'); 
 
    _button.id = "scrollToTop"; 
 
    _button.class = ""; 
 

 
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
 
    svg.setAttribute('style', 'border: 1px solid black'); 
 
    svg.setAttribute('width', '600'); 
 
    svg.setAttribute('height', '250'); 
 
    svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink"); 
 

 
    var _polyline = document.createElementNS("http://www.w3.org/2000/svg", 'polyline'); 
 
    _polyline.setAttribute("fill", "#006600"); 
 
    _polyline.setAttribute("stroke", "#FFFFFF"); 
 
    _polyline.setAttribute('stroke-width', '1'); 
 
    _polyline.setAttribute('stroke-linecap', 'round'); 
 
    _polyline.setAttribute('stroke-linejoin', 'round'); 
 
    _polyline.setAttribute("points", "10,52 60,52 35,0"); 
 

 
document.getElementById('scrollToTop').appendChild(svg).appendChild(_polyline);

<div id="scrollToTop"></div>