[SVG][HTML5] - Adding POLYGONS after load

Question

I am currently trying to make a SVG generator using HTML5 and JQuery. To make this "possible", I am creating an empty HTML5 SVG element then add some HTML5 Polygon elment on it using JQuery.

The problem is that the polygons added by .append() using JQuery doesn't appear on my screen. Is there a way for this to work ? The code seems to be correct using the Chrome Developper Console.

Example of code produced by JQuery (Developper Console View) :

<svg id="map" width="800" height="600" style="width:800px;height:600px;background-color:white;border:1px solid #0000ff;">
    <polygon points="330, 285, 400, 250, 470, 285, 400, 320" style="fill:blue;stroke:black;stroke-width:0;fill-rule:evenodd;"></polygon>
</svg>

Actually, this code didn't show anything on my screen if using my JQuery function.

score 0 · Answer 1 · answered Mar 17 '18 at 22:15

Making it work extending JQuery thanx to the French Developper dascritch.

Here is the code I used :

jQuery.fn.extend({
    appendSVG:function (nom,attributs)
    {
        var svg = document.createElementNS("http://www.w3.org/2000/svg",nom);
        for (var cle in attributs)
        {
            var valeur = attributs[cle];
            svg.setAttribute(cle,valeur);
        }
        var appendices = this.length;
        for (var i = 0; i < appendices; i++)
        {
            this[i].appendChild(svg);
        }
        return svg;
    }
});

And to call it (with my own parameters) :

$('svg#map').appendSVG('polygon',{points:''+initialPointForA1X+', '+initialPointForA1Y+', '+initialPointForB1X+', '+initialPointForB1Y+', '+initialPointForC1X+', '+initialPointForC1Y+', '+initialPointForD1X+', '+initialPointForD1Y+'',style:'fill:blue;stroke:black;stroke-width:0;fill-rule:evenodd;'});

This is now working nice !

Don't misstake to add XHTML declarations to your document.

<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">

See https://developer.mozilla.org/fr/docs/Web/API/Document/createElementNS for further informations.

[SVG][HTML5] - Adding POLYGONS after load

1 Answers1