[英]SVG-JavaScript not rendering properly
我已经尝试了很多。 什么都没有。 有人帮我吗
谢谢。
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);
以下应该工作。 创建元素并使用以下样式应用样式:
这样就可以在SVG(而不是HTML文档)的范围(因此, 命名空间 )内创建svg及其内部形状。
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);
比较简单,但仍然有效:
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.