Please Wait....
Your Experience is being rendered.
Click the [Live] button if the Experience does not load in few moments.









var VMLGroupSVGGroupArray=new Array();

var CorresspondingVMLSVG = new Array();

var CorresspondingVML = new Array();

var CorresspondingSVG = new Array();

function ConvertVMLToSVG123(VMLNodes12,svgDefsNode,svgDoc,svgRoot)

{

//alert('start' + VMLNodes12.length);

//alert('svgDoc innerHTMl = '+svgDoc.getElementById('body').innerHTML)

//alert(svgDoc +" && "+ svgRoot );

/* if(FrameId == "SVGDisplayFrame")

{

for(i=0;i<VMLNodes12.length;i++)

{

//alert(FrameId + " ::: " + VMLNodes12[i].outerHTML);

}

}

if(GroupId =='' || GroupId == undefined || GroupId == null)

{

var svgDoc = document.getElementById(FrameId).contentWindow.document;

var svgRoot = document.getElementById(FrameId).contentWindow.ReturnTestSVG();

}

else

{

var svgDoc = document.getElementById(FrameId).contentWindow.document;

var svgRoot = document.getElementById(FrameId).contentWindow.document.getElementById(GroupId.id);

//alert(svgRoot);

}

*/

//var svgDefsNode = GenerateSVGStencils(svgRoot);

for (var iiCount=0; iiCount<VMLNodes12.length; iiCount++)

{

//alert('in for ii='+iiCount)

var svgShapeNode = null;

var vmlShapeNode = VMLNodes12[iiCount];

if (vmlShapeNode.tagName)

{

switch (vmlShapeNode.tagName.toLowerCase())

{

case "v:group":

case "group":

var coordoriginValue1 = parseInt(vmlShapeNode.getAttribute("coordorigin").split(",")[0]);

var coordoriginValue2 = parseInt(vmlShapeNode.getAttribute("coordorigin").split(",")[1]);

var coordsizeValue1 = parseInt(vmlShapeNode.getAttribute("coordsize").split(",")[0]);

var coordsizeValue2 = parseInt(vmlShapeNode.getAttribute("coordsize").split(",")[1]);

svgShapeNode = svgDoc.createElementNS(svgNS, "g");

svgShapeNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id"));

svgShapeNode.setAttributeNS(null, "transform","scale(1.0)");

svgShapeNode.setAttributeNS(null, "transform","translate(77,58)");

//svgShapeNode.setAttributeNS(null, "viewBox",[coordoriginValue1,coordoriginValue2].join( " " ));

var coordOriginXY = vmlShapeNode.getAttribute("coordorigin").trim().split(/,| /);

var coordSizeXY = vmlShapeNode.getAttribute("coordsize").trim().split(/,| /);

svgShapeNode.setAttributeNS(null, "viewBox", coordOriginXY[0] + ' ' + coordOriginXY[1] + ' ' + coordSizeXY[0] + ' ' + coordSizeXY[1]);

//svgShapeNode.setAttributeNS(null, "z-index", parseInt(vmlShapeNode.style.getPropertyValue("z-index")));

svgShapeNode.setAttributeNS(null, "style", "z-index:"+parseInt(vmlShapeNode.style.getPropertyValue("z-index")));

//svgShapeNode.style.zIndex = parseInt(vmlShapeNode.style.getPropertyValue("z-index"));

svgShapeNode.setAttributeNS(null, "position", vmlShapeNode.style.getPropertyValue("position"));

svgShapeNode.setAttributeNS(null, "x", parseInt(vmlShapeNode.style.getPropertyValue("left")));

svgShapeNode.setAttributeNS(null, "y", parseInt(vmlShapeNode.style.getPropertyValue("top")));

svgShapeNode.setAttributeNS(null, "width", parseInt(vmlShapeNode.style.getPropertyValue("width")));

svgShapeNode.setAttributeNS(null, "height", parseInt(vmlShapeNode.style.getPropertyValue("height")));

//alert(vmlShapeNode.style.getPropertyValue("position"))

var GroupArray = VMLNodes12[iiCount].childNodes;

//alert(vmlShapeNode.outerHTML);

document.all('t1').value = document.all('t1').value + "****************" + vmlShapeNode.outerHTML;

//alert(coordoriginValue1 +' :: '+coordsizeValue1);

//var NewsvgRoot = svgDoc.getElementById(GroupId.id);

//alert('Before');

ConvertVMLToSVG123(GroupArray,svgDefsNode,svgDoc,svgShapeNode);

//alert(VMLGroupSVGGroupArray);

svgRoot.appendChild(svgShapeNode);

//alert(svgShapeNode.outerHTML);

//alert('after');

//alert(iiCount);

//alert(1);

/*

 

*/ break;

case "rect":

case "v:rect":

svgShapeNode = svgDoc.createElementNS(svgNS, "rect");

svgShapeNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id"));

svgShapeNode.setAttributeNS(null, "x", parseInt(vmlShapeNode.style.getPropertyValue("left")));

svgShapeNode.setAttributeNS(null, "y", parseInt(vmlShapeNode.style.getPropertyValue("top")));

svgShapeNode.setAttributeNS(null, "width", parseInt(vmlShapeNode.style.getPropertyValue("width")));

svgShapeNode.setAttributeNS(null, "height", parseInt(vmlShapeNode.style.getPropertyValue("height")));

//svgRoot.appendChild(svgShapeNode);

CorresspondingVML[CorresspondingVML.length] = vmlShapeNode;

CorresspondingSVG[CorresspondingSVG.length] = svgShapeNode;

CorresspondingVMLSVG = null;

CorresspondingVMLSVG = new Array();

CorresspondingVMLSVG[0] = vmlShapeNode;

CorresspondingVMLSVG[1] = svgShapeNode;

CorresspondingVMLSVG[2] = parseInt(vmlShapeNode.style.getPropertyValue("z-index"));

CorresspondingVMLSVG[3] = svgRoot;

VMLGroupSVGGroupArray[VMLGroupSVGGroupArray.length] = CorresspondingVMLSVG;

break;

case "roundrect":

case "v:roundrect":

svgShapeNode = svgDoc.createElementNS(svgNS, "rect");

svgShapeNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id"));

svgShapeNode.setAttributeNS(null, "x", parseInt(vmlShapeNode.style.getPropertyValue("left")));

svgShapeNode.setAttributeNS(null, "y", parseInt(vmlShapeNode.style.getPropertyValue("top")));

svgShapeNode.setAttributeNS(null, "width", parseInt(vmlShapeNode.style.getPropertyValue("width")));

svgShapeNode.setAttributeNS(null, "height", parseInt(vmlShapeNode.style.getPropertyValue("height")));

svgShapeNode.setAttributeNS(null, "rx", parseInt(vmlShapeNode.style.getPropertyValue("width"))/10);

svgShapeNode.setAttributeNS(null, "ry", parseInt(vmlShapeNode.style.getPropertyValue("height"))/10);

//svgRoot.appendChild(svgShapeNode);

CorresspondingVML[CorresspondingVML.length] = vmlShapeNode;

CorresspondingSVG[CorresspondingSVG.length] = svgShapeNode;

CorresspondingVMLSVG = null;

CorresspondingVMLSVG = new Array();

CorresspondingVMLSVG[0] = vmlShapeNode;

CorresspondingVMLSVG[1] = svgShapeNode;

CorresspondingVMLSVG[2] = parseInt(vmlShapeNode.style.getPropertyValue("z-index"));

CorresspondingVMLSVG[3] = svgRoot;

VMLGroupSVGGroupArray[VMLGroupSVGGroupArray.length] = CorresspondingVMLSVG;

break;

case "oval":

case "v:oval":

svgShapeNode = svgDoc.createElementNS(svgNS, "ellipse");

svgShapeNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id"));

var rx = parseInt(vmlShapeNode.style.getPropertyValue("width"))/2;

var ry = parseInt(vmlShapeNode.style.getPropertyValue("height"))/2;

var cx = parseInt(vmlShapeNode.style.getPropertyValue("left")) + rx;

var cy = parseInt(vmlShapeNode.style.getPropertyValue("top")) + ry;

svgShapeNode.setAttributeNS(null, "cx", cx);

svgShapeNode.setAttributeNS(null, "cy", cy);

svgShapeNode.setAttributeNS(null, "rx", rx);

svgShapeNode.setAttributeNS(null, "ry", ry);

//svgRoot.appendChild(svgShapeNode);

CorresspondingVML[CorresspondingVML.length] = vmlShapeNode;

CorresspondingSVG[CorresspondingSVG.length] = svgShapeNode;

CorresspondingVMLSVG = null;

CorresspondingVMLSVG = new Array();

CorresspondingVMLSVG[0] = vmlShapeNode;

CorresspondingVMLSVG[1] = svgShapeNode;

CorresspondingVMLSVG[2] = parseInt(vmlShapeNode.style.getPropertyValue("z-index"));

CorresspondingVMLSVG[3] = svgRoot;

VMLGroupSVGGroupArray[VMLGroupSVGGroupArray.length] = CorresspondingVMLSVG;

break;

case "shape":

case "v:shape":

var vmlShapeTypeId = vmlShapeNode.getAttribute("type");

if (!vmlShapeTypeId || vmlShapeTypeId.trim() == "")

{

var vmlPath = vmlShapeNode.getAttribute("path");

if (vmlPath)

{

var svgPath = GetSVGPathFromVMLShape(vmlShapeNode);

if (svgPath)

{

var symbolNode = svgDoc.createElementNS(svgNS, "symbol");

svgDefsNode.appendChild(symbolNode);

symbolNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id") + "_Def");

var coordOriginXY = vmlShapeNode.getAttribute("coordorigin").trim().split(/,| /);

var coordSizeXY = vmlShapeNode.getAttribute("coordsize").trim().split(/,| /);

symbolNode.setAttributeNS(null, "viewBox", coordOriginXY[0] + ' ' + coordOriginXY[1] + ' ' + coordSizeXY[0] + ' ' + coordSizeXY[1]);

symbolNode.setAttributeNS(null, "transform","translate(77,58)");

symbolNode.setAttributeNS(null, "preserveAspectRatio", "none");

symbolNode.setAttributeNS(null, "overflow", "visible");

var pathNode = svgDoc.createElementNS(svgNS, "path");

symbolNode.appendChild(pathNode);

pathNode.setAttributeNS(null, "d", svgPath);

svgShapeNode = svgDoc.createElementNS(svgNS, "use");

svgShapeNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id"));

//svgShapeNode.setAttributeNS(svgXLink, "href", "#" + vmlShapeNode.getAttribute("id") + "_Def");

svgShapeNode.setAttributeNS(svgXLink, "xlink:href", "#" + vmlShapeNode.getAttribute("id") + "_Def");

//svgShapeNode.setAttributeNS(null, "z-index", parseInt(vmlShapeNode.style.getPropertyValue("z-index")));

svgShapeNode.setAttributeNS(null, "style", "z-index:"+parseInt(vmlShapeNode.style.getPropertyValue("z-index")));

svgShapeNode.setAttributeNS(null, "x", parseInt(vmlShapeNode.style.getPropertyValue("left")));

svgShapeNode.setAttributeNS(null, "y", parseInt(vmlShapeNode.style.getPropertyValue("top")));

svgShapeNode.setAttributeNS(null, "width", parseInt(vmlShapeNode.style.getPropertyValue("width")));

svgShapeNode.setAttributeNS(null, "height", parseInt(vmlShapeNode.style.getPropertyValue("height")));

//svgRoot.appendChild(svgShapeNode);

CorresspondingVML[CorresspondingVML.length] = vmlShapeNode;

CorresspondingSVG[CorresspondingSVG.length] = svgShapeNode;

CorresspondingVMLSVG = null;

CorresspondingVMLSVG = new Array();

CorresspondingVMLSVG[0] = vmlShapeNode;

CorresspondingVMLSVG[1] = svgShapeNode;

CorresspondingVMLSVG[2] = parseInt(vmlShapeNode.style.getPropertyValue("z-index"));

CorresspondingVMLSVG[3] = svgRoot;

VMLGroupSVGGroupArray[VMLGroupSVGGroupArray.length] = CorresspondingVMLSVG;

}

}

}

else

{

svgShapeNode = svgDoc.createElementNS(svgNS, "use");

svgShapeNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id"));

//svgShapeNode.setAttributeNS(svgXLink, "href", vmlShapeTypeId);

svgShapeNode.setAttributeNS(svgXLink, "xlink:href", vmlShapeTypeId);

svgShapeNode.setAttributeNS(null, "transform","translate(77,58)");

//svgShapeNode.setAttributeNS(null, "z-index", parseInt(vmlShapeNode.style.getPropertyValue("z-index")));

svgShapeNode.setAttributeNS(null, "style", "z-index:"+parseInt(vmlShapeNode.style.getPropertyValue("z-index")));

svgShapeNode.setAttributeNS(null, "x", parseInt(vmlShapeNode.style.getPropertyValue("left")));

svgShapeNode.setAttributeNS(null, "y", parseInt(vmlShapeNode.style.getPropertyValue("top")));

svgShapeNode.setAttributeNS(null, "width", parseInt(vmlShapeNode.style.getPropertyValue("width")));

svgShapeNode.setAttributeNS(null, "height", parseInt(vmlShapeNode.style.getPropertyValue("height")));

//svgRoot.appendChild(svgShapeNode);

CorresspondingVML[CorresspondingVML.length] = vmlShapeNode;

CorresspondingSVG[CorresspondingSVG.length] = svgShapeNode;

CorresspondingVMLSVG = null;

CorresspondingVMLSVG = new Array();

CorresspondingVMLSVG[0] = vmlShapeNode;

CorresspondingVMLSVG[1] = svgShapeNode;

CorresspondingVMLSVG[2] = parseInt(vmlShapeNode.style.getPropertyValue("z-index"));

CorresspondingVMLSVG[3] = svgRoot;

VMLGroupSVGGroupArray[VMLGroupSVGGroupArray.length] = CorresspondingVMLSVG;

}

break;

default:

break;

}

}

}//added

//sort and append

//alert(VMLGroupSVGGroupArray[1][0].id);

VMLGroupSVGGroupArray.sort(SortVMLGroupSVGGroupArray);

var CorresspondingSVGRoot ="";

var CorresspondingsvgShapeNode="";

for(var tt=0; tt < VMLGroupSVGGroupArray.length;tt++)

{

CorresspondingSVGRoot = VMLGroupSVGGroupArray[tt][3];

CorresspondingsvgShapeNode = VMLGroupSVGGroupArray[tt][1];

CorresspondingSVGRoot.appendChild(VMLGroupSVGGroupArray[tt][3]);

//}

svgShapeNode = CorresspondingsvgShapeNode;//VMLGroupSVGGroupArray[tt][1];

vmlShapeNode = VMLGroupSVGGroupArray[tt][0];

if((vmlShapeNode.tagName.toLowerCase() != 'v:group') && (vmlShapeNode.tagName.toLowerCase() != 'group'))

{

if (svgShapeNode)

{

if (vmlShapeNode.getAttribute("filled").toLowerCase() == "t")

{

var vmlFillElement = GetChildNodeByTagName(vmlShapeNode, 'v:fill');

if ( vmlFillElement && vmlFillElement.getAttribute("color2") )

{

var svgGradientNode = svgDoc.createElementNS(svgNS, "linearGradient");

svgDefsNode.appendChild(svgGradientNode);

svgGradientNode.setAttributeNS(null, "id", vmlShapeNode.getAttribute("id")+ "_Gradient");

var svgGradientColor1StopNode = svgDoc.createElementNS(svgNS, "stop");

svgGradientNode.appendChild(svgGradientColor1StopNode);

svgGradientColor1StopNode.setAttributeNS(null, "offset", "5%");

svgGradientColor1StopNode.setAttributeNS(null, "stop-color", vmlFillElement.getAttribute("color2"));

var svgGradientColor2StopNode = svgDoc.createElementNS(svgNS, "stop");

svgGradientNode.appendChild(svgGradientColor2StopNode);

svgGradientColor2StopNode.setAttribute("offset", "95%");

svgGradientColor2StopNode.setAttribute("stop-color", vmlShapeNode.getAttribute("fillcolor"));

svgShapeNode.setAttributeNS(null, "fill", "url(#" + vmlShapeNode.getAttribute("id") + "_Gradient" + ")");

}

else

{

svgShapeNode.setAttributeNS(null, "fill", vmlShapeNode.getAttribute("fillcolor"));

}

}

else

{

svgShapeNode.setAttributeNS(null, "fill", "none");

}

if (vmlShapeNode.getAttribute("stroked").toLowerCase() == "t")

{

svgShapeNode.setAttributeNS(null, "stroke", vmlShapeNode.getAttribute("strokecolor"));

svgShapeNode.setAttributeNS(null, "stroke-width", vmlShapeNode.getAttribute("strokeweight"));

}

else

{

svgShapeNode.setAttributeNS(null, "stroke", "none");

}

}

}//end if

}//end for

}

function SortVMLGroupSVGGroupArray(a,b)

{

if (a[2]<b[2]) return -1;

if (a[2]>b[2]) return 1;

return 0;

}