CODEWITHSUNDEEP
javascripthtmlsvg
Peter Elzinga
Peter Elzinga

Reputation: 125

After dynamically adding element to SVG the item is not visible

I am creating a custom map that is drawn in an SVG. I want to add a polygon to this map, however after adding the polygon it is not drawn. If I paste the complete page into an .html file and open it, it does show (http://peterelzinga.eu/map/test.html).

The code for adding the polygon to my SVG:

var svg = file_get_contents("18/135160/86183.svg");
var parser = new DOMParser();
var data = parser.parseFromString(svg, "text/xml");
data = data.firstChild;
console.log(data);
data.setAttribute ("x", d);
data.setAttribute ("y", e);
document.getElementById('front').appendChild(data);

The SVG element after adding the polygon:

<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
    <g id="back">
        <image xlink:href="12/2110/1345.png" x="0" y="0" width="256" height="256"></image>
    </g>
    <g id="front">
        <g width="256" height="256" x="0" y="0">
            <polyline fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="256,85.333 209,100.667 230.334,158.334 143,194.334 160.667,248.667 221.667,223.667 256,241.334 " onclick="alert('St Jansdal')"></polyline>
        </g>
    </g>
</svg>

Does anyone know why this happens?

Upvotes: 1

Views: 3243

Answers (2)

kitsu.eb
kitsu.eb

Reputation: 3066

From Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

You should specify the content type as "image/svg+xml" to get a SVGDocument.

The problem is that your generated nodes are not SVG nodes, but XML nodes.

I had a similar problem solved by switching from createElement to createElementNS. See answer: jquery's append not working with svg element?

Upvotes: 4

Peter Elzinga
Peter Elzinga

Reputation: 125

Why the above won't work is still a mistery to me. However, i did manage to resolve the problem by using the following solution:

The javascript function to load and add an new svg element - which contains our polyline - to the main element:

var api  = new XMLHttpRequest;
api.open("GET", a+"/"+b+"/"+c+".svg", false);

api.send("");

if( api.status == 200 ) {
    var parser = new DOMParser();
    var data = parser.parseFromString(api.responseText, "text/xml");
    data = data.firstChild;
    console.log(data);
    data.setAttribute("x", d);
    data.setAttribute("y", e);
    document.getElementById('front').appendChild(data);
}

Now instead of only having the polyline element in the .svg file, I have put a complete svg element in the file:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
    <polyline fill="#FFFFFF" points="0,97 45,81.333 51.667,100.667 13.667,117.333 31,164 142.167,119.5 127.167,75.001 
172.667,53.341 152.5,0 0,0 "/>
</svg>

And this does work. By setting the X and Y values of the I can position the svg in the correct spot so the polyline is drawn in the right place.

The endresult:

<svg id="map" xmlns="http://www.w3.org/2000/svg" version="1.1" width="512" height="512">
    <g id="back">
        <image xlink:href="18/135160/86183.png" x="0" y="0" width="256" height="256"></image>
        <image xlink:href="18/135161/86183.png" x="256" y="0" width="256" height="256"></image>
        <image xlink:href="18/135160/86184.png" x="0" y="256" width="256" height="256"></image>
        <image xlink:href="18/135161/86184.png" x="256" y="256" width="256" height="256"></image>
    </g>
<g id="front">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="256,84.75 209,100.75 230.75,157.5 142.5,194.25 160.75,248.5 221.75,223.75 256,241 "></polyline>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="256" y="0" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="0,85.336 6.333,82.669 44,180.336 86,200.669 135.333,181.002 155.667,138.669 136.667,82.669   190,63.669 202,94.336 256,76.002 256,137.336 219.333,151.336 184.333,219.669 188.333,228.669 231.333,252.669 256,243.336   256,256 30,256 0,240.669 "></polyline>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="256" y="256" width="256px" height="256px" viewBox="0 0 256 256" enable-background="new 0 0 256 256" xml:space="preserve">
            <polyline name="St. Jansdal" fill="#FFFFFF" points="31.25,0 78.5,24 82.75,29.75 82.75,34.75 81.5,40 74.5,52.5 0,80.75 0,134.25 64.25,110 87.25,120   120.75,207.5 133.5,212.25 133.5,206 139.25,199.75 150,197.75 154,198.75 162,202.25 165.25,191.5 122.5,76.25 129.5,61.75   135.25,55 138.75,53.25 141.5,53.25 144.5,53.75 235.25,93.75 239.5,103.75 256,97.75 256,0 "></polyline>
        </svg>
    </g>
</svg>

Upvotes: 1

Related Questions