SVG-JavaScript无法正确呈现

Question

我已经尝试过这么多。什么都行不通。有人帮帮我吗？

感谢。

var svg = document.createElement("svg");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");

var line = document.createElement("line");
line.setAttribute("x1", "0");
line.setAttribute("y1", "0");
line.setAttribute("x2", "100");
line.setAttribute("y2", "100");
line.setAttribute("stroke", "black");
line.setAttribute("stroke-width", "4px");

svg.appendChild(line);

document.body.appendChild(svg);

Answer 1

以下内容应该有效。使用以下命令创建元素并应用样式：

• Document.createElementNS
• Element.setAttributeNS

这使得svg及其内部形状将在SVG的范围内创建（因此 - 名称空间），而不是HTML文档。

＆＃13;

＆＃13;

var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttributeNS(null, 'width', '100%');
svg.setAttributeNS(null, 'height', '100%');

var line = document.createElementNS(svgns, "line");
line.setAttributeNS(null, 'x1', 0);
line.setAttributeNS(null, 'y1', 0);
line.setAttributeNS(null, 'x2', 100);
line.setAttributeNS(null, 'y2', 100); 
line.setAttributeNS(null, 'stroke', 'black');
line.setAttributeNS(null, 'stroke-width', 4);
svg.appendChild(line);

document.body.appendChild(svg);

＆＃13;

＆＃13;

＆＃13;

更简单，但仍然有效：

＆＃13;

＆＃13;

var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%');

var line = document.createElementNS(svgns, "line");
line.setAttribute('x1', 0);
line.setAttribute('y1', 0);
line.setAttribute('x2', 100);
line.setAttribute('y2', 100); 
line.setAttribute('stroke', 'black');
line.setAttribute('stroke-width', 4);
svg.appendChild(line);

document.body.appendChild(svg);

＆＃13;

＆＃13;

＆＃13;