使用JavaScript动态绘制SVG

Question

我试图绘制等腰三角形，其顶部顶点位于屏幕中间。

我想使用JavaScript，因为不同用户的屏幕尺寸可能不同，因此必须首先找出屏幕中心。

这是我的代码：

function drawRect(){

        var w = $(document).width();
        var h = $(window).height();
        var halfh = h/2;
        var halfw = w/2;
        var svg = document.createElement("svg");
        var poly = document.createElement("polygon");
        svg.setAttribute("style", "position: fixed;");
        svg.setAttribute("height", ""+h);
        svg.setAttribute("width", ""+w);
        poly.setAttribute("points", ""+halfw+","+halfh+" 0,"+h+" "+w+","+h);
        poly.setAttribute("style", "fill:lime;stroke:purple;stroke-width:1");
        svg.appendChild(poly);

        var svgplace = document.getElementById("carpet");
        svgplace.appendChild(svg);
     }

屏幕上没有出现三角形。 但是，如果我在chrome上打开“检查元素”控制台，并稍加修改了创建的html元素，它就会出现！ （任何小型mod。例如在中间的某个地方添加空格）

请帮忙！

提前致谢

Answer 1

您需要使用

document.createElementNS("http://www.w3.org/2000/svg", "polygon");

SVG除了HTML之外，还位于其自己的命名空间中。 因此，您需要使用createElementNS创建SVG命名空间中的createElementNS 。

---

考虑以下在Chrome和Firefox中运行的示例

 var newItem = document.createElementNS("http://www.w3.org/2000/svg", "circle"); newItem.setAttribute("cx", ((16 * 1) + 8)); newItem.setAttribute("cy", "50%"); newItem.setAttribute("r", 4); newItem.setAttribute("fill", "#333333"); document.getElementById("target").appendChild(newItem); 

 <svg id="target"> </svg>