无法创建 svg

Question

我正在尝试使用 javascript 创建一个svg、polyline。

虽然它正确地创建和附加了元素，但 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>