Question

I need some help with drawing a vml line-element using Javascript into a vml group-element, which is defined in the HTML-Code.

My v:group element, which has other vml elements like v:arc or v:rect…:

   <div style="width: 940px; height: 490px; margin-bottom: 60px; position: relative; top: -440px; left: 20px;">
   <v:group ID="vmlgruppe" style="width:940px; height: 470px; clip:hidden;      position:relative;" coordsize="210, 105" xmlns:v="urn:schemas-microsoft-com:vml">

Now i have to draw a vml line element using javascript.

            document.namespaces.add("v","urn:schemas-microsoft-com:vml", "#default#VML");
            var container12 = document.getElementById("vmlgruppe");
            var line = document.createElement("v:line");

            line.strokecolor = "black";
            line.from = "105,10";
            line.to = "120, 74";
            line.style.position = "absolute";

            vmlgruppe.appendChild(line);

It works fine if i draw a line-element without using Javascript.
But if i draw the same line element using Javascript, the element has a different position. Where is the bug? Can someone help me plz.
Thanks.

Answer 1

I solved the problem.

I used in v:group a v:line element with an ID

<v:line id="progression-0" from="-10, -10" to="-10, -10"></v:line>

And in Javascript I used the following code:

var line = document.getElementById("progression-0");
line.from = x + "," + y ;
line.to = x2 + "," + y2;
line.strokeweight = 4+"px";
line.style.opacity = 0.3;