Question

我正在尝试绘制一个isoceles三角形，它的顶部顶点位于屏幕中间。

我想使用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上打开'Inspect Element'控制台，并且我稍微修改了创建的html元素，它就会出现！（任何一种小模型。就像在中间某处添加空间一样）

请帮忙！

提前致谢

Answer 1

您需要使用

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

除了SVG之外，

HTML位于自己的命名空间中。因此，您需要使用createElementNS创建SVG命名空间中的元素。

请考虑以下适用于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>

使用javascript动态绘制SVG

1 个答案: