Runtime SVG nodes with path elements crashes inside SVGToModel (FireFox)

[saadfaisal]

Hi , i am generating SVG nodes at runtime with stored path elements from database and generate 3D Models on the fly. This works perfectly fine with Chrome however FireFox is causing issues. Here is how i generate an SVG node, assume

function getPathNode() {
    var path = "M 197.77778,0 C 129.46031,0 71.04151,35.842624 47.291667,86.540232 L 0,86.540232 0,400 l 400,0 0,-313.459768 -51.73611,0 C 324.50663,35.842733 266.07691,0 197.77778,0 z";

    return { svgData: path };   
}

function GetNextTime() {
    return new Date().getTime();
}

function CreateSVGPreviewNode() {
    var svg_clone = null;
    var spec = getPathNode();

    var style_str = "<svg id=\"svg"+GetNextTime()+"\""
    +"xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"430\" height=\"430\""
    +"xmlns:xlink=\"http://www.w3.org/1999/xlink\""
    +"xmlns:svg=\"http://www.w3.org/2000/svg\""
    +"xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\""
    +"xmlns:cc=\"http://creativecommons.org/ns#\""
    +"xmlns:dc=\"http://purl.org/dc/elements/1.1/\">"
    +"<path d=\""+ spec.svgData +"\" style=\"fill:#ffff00\" id=\"path-"+GetNextTime()+"\"></path>"
    +"</svg>";

    svg_clone = $.parseHTML(style_str)[0];

    return svg_clone;
}

However when i attempt to create a Model out of this node, the SVGToModel function crashes exactly on the following line in function "AddTransformedVertex"

var transformed = point.matrixTransform (elem.getCTM ());

its the getCTM() that returns the null and crashes the code. Any suggestion if there are any consistent ways that i can use to generate such runtime nodes and makes model out of them.

[saadfaisal]

well it seems that the reason was that for FireFox , the svg node needs to be part of any existing DOM node, so adding this resolve the issue.

function CreateSVGPreviewNode() {
    var svg_clone = null;
    var spec = getPathNode();

    var style_str = "<svg id=\"svg"+GetNextTime()+"\""
    +"xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"430\" height=\"430\""
    +"xmlns:xlink=\"http://www.w3.org/1999/xlink\""
    +"xmlns:svg=\"http://www.w3.org/2000/svg\""
    +"xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\""
    +"xmlns:cc=\"http://creativecommons.org/ns#\""
    +"xmlns:dc=\"http://purl.org/dc/elements/1.1/\">"
    +"<path d=\""+ spec.svgData +"\" style=\"fill:#ffff00\" id=\"path-"+GetNextTime()+"\"></path>"
    +"</svg>";

    svg_clone = $.parseHTML(style_str)[0];

    var root = document.getElementById("svgContainerForRunTimeNodes");
    root.appendChild(svg_clone);    

    return svg_clone;
}

"svgContainerForRunTimeNodes" is just a div in this case. Case Closed.

[kovacsv]

Yes, unfortunately it is an error in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=756985

I corrected the code, and check for null return value, so in the next JSModeler release it will work. I'm glad you found a workaround, and thanks for the error report.