JavaScript createElementNS和SVG

尤其是在创建元素时遇到问题.由于它将作为< textpath> 附加，因此将不起作用.我进行了一些搜索，但仍未找到解决方案.有人知道解决方案吗? document.createElementNS("http://www.w3.org/2000/svg"，"textPath")； 产生 < textpath></textpath> 解决方案我希望以下示例对您有所帮助: function CreateSVG(){var xmlns ="http://www.w3.org/2000/svg";var boxWidth = 300;var boxHeight = 300;var svgElem = document.createElementNS(xmlns，"svg");svgElem.setAttributeNS(null，"viewBox"，"0 0" + boxWidth +" + boxHeight);svgElem.setAttributeNS(null，"width"，boxWidth);svgElem.setAttributeNS(null，"height"，boxHeight);svgElem.style.display ="block";var g = document.createElementNS(xmlns，"g");svgElem.appendChild(g);g.setAttributeNS(null，'transform'，'matrix(1,0,0，-1,0,300)');//绘制线性渐变var defs = document.createElementNS(xmlns，"defs");var grad = document.createElementNS(xmlns，"linearGradient");grad.setAttributeNS(null，"id"，"gradient");grad.setAttributeNS(null，"x1"，"0％");grad.setAttributeNS(null，"x2"，"0％");grad.setAttributeNS(null，"y1"，"100％");grad.setAttributeNS(null，"y2"，"0％");var stopTop = document.createElementNS(xmlns，"stop");stopTop.setAttributeNS(null，"offset"，"0％");stopTop.setAttributeNS(null，"stop-color"，#ff0000");grad.appendChild(stopTop);var stopBottom = document.createElementNS(xmlns，"stop");stopBottom.setAttributeNS(null，"offset"，"100％");stopBottom.setAttributeNS(null，"stop-color"，#0000ff");grad.appendChild(stopBottom);defs.appendChild(grad);g.appendChild(defs);//绘制边框var coords ="M 0，0";坐标+ ="l 0，300";坐标+ ="l 300，0";坐标+ ="l 0，-300";坐标+ ="l -300，0";var path = document.createElementNS(xmlns，"path");path.setAttributeNS(null，'stroke'，#000000");path.setAttributeNS(null，'stroke-width'，10);path.setAttributeNS(null，'stroke-linejoin'，"round");path.setAttributeNS(null，'d'，coords);path.setAttributeNS(null，'fill'，"url(#gradient)");path.setAttributeNS(null，'opacity'，1.0);g.appendChild(path);var svgContainer = document.getElementById("svgContainer");svgContainer.appendChild(svgElem);} #svgContainer {宽度:400像素；高度:400px；背景颜色:#a0a0a0;} < body onload ="CreateSVG()">< div id ="svgContainer"></div></body> I want to create inline SVG graphics using Javascript.However, it seems like createElementNS function applies some normalization and transforms all tags to lowercase. That is fine for HTML but not for XML/SVG. The NS I used is http://www.w3.org/2000/svg.In particular I have problems creating a element. As it will be appended as <textpath> and thus will not work.I did some search but could not find a solution yet.Does anybody know a solution?document.createElementNS("http://www.w3.org/2000/svg","textPath");results in<textpath></textpath> 解决方案 I hope, the following example will help you:function CreateSVG() { var xmlns = "http://www.w3.org/2000/svg"; var boxWidth = 300; var boxHeight = 300; var svgElem = document.createElementNS(xmlns, "svg"); svgElem.setAttributeNS(null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); svgElem.setAttributeNS(null, "width", boxWidth); svgElem.setAttributeNS(null, "height", boxHeight); svgElem.style.display = "block"; var g = document.createElementNS(xmlns, "g"); svgElem.appendChild(g); g.setAttributeNS(null, 'transform', 'matrix(1,0,0,-1,0,300)'); // draw linear gradient var defs = document.createElementNS(xmlns, "defs"); var grad = document.createElementNS(xmlns, "linearGradient"); grad.setAttributeNS(null, "id", "gradient"); grad.setAttributeNS(null, "x1", "0%"); grad.setAttributeNS(null, "x2", "0%"); grad.setAttributeNS(null, "y1", "100%"); grad.setAttributeNS(null, "y2", "0%"); var stopTop = document.createElementNS(xmlns, "stop"); stopTop.setAttributeNS(null, "offset", "0%"); stopTop.setAttributeNS(null, "stop-color", "#ff0000"); grad.appendChild(stopTop); var stopBottom = document.createElementNS(xmlns, "stop"); stopBottom.setAttributeNS(null, "offset", "100%"); stopBottom.setAttributeNS(null, "stop-color", "#0000ff"); grad.appendChild(stopBottom); defs.appendChild(grad); g.appendChild(defs); // draw borders var coords = "M 0, 0"; coords += " l 0, 300"; coords += " l 300, 0"; coords += " l 0, -300"; coords += " l -300, 0"; var path = document.createElementNS(xmlns, "path"); path.setAttributeNS(null, 'stroke', "#000000"); path.setAttributeNS(null, 'stroke-width', 10); path.setAttributeNS(null, 'stroke-linejoin', "round"); path.setAttributeNS(null, 'd', coords); path.setAttributeNS(null, 'fill', "url(#gradient)"); path.setAttributeNS(null, 'opacity', 1.0); g.appendChild(path); var svgContainer = document.getElementById("svgContainer"); svgContainer.appendChild(svgElem);}#svgContainer { width: 400px; height: 400px; background-color: #a0a0a0;}<body onload="CreateSVG()"> <div id="svgContainer"></div></body> 这篇关于JavaScript createElementNS和SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！