CODEWITHSUNDEEP
javascriptsvginnerhtml
CJames
CJames

Reputation: 99

Trying to add SVG data with .innerHTML

I am trying to dynamically create SVG elements using element.innerHTML but it doesn't seem to work.

This is the SVG data I want to use:

<style type="text/css">
    .st0{fill:url(#SVGID_1_);}
    .st1{fill:#F4F4F4;}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19">
    <stop  offset="0" style="stop-color:#F8615F"/>
    <stop  offset="1" style="stop-color:#C1272D"/>
</linearGradient>
<path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9
    c0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29
    C72.5,33.1,71.4,36.9,69.5,40.2z"/>
<circle class="st1" cx="50" cy="29.1" r="10.4"/>

Here is the HTML:

<svg id="scene" viewBox="0 0 1000 1000">
    <g id = "locations">

    </g>
</svg>

And the JavaScript:

function createLocation(px, py, video_id = "")
{
    var locations = document.getElementById("locations");
    var loc = document.createElement("g");
    loc.setAttribute("id", "loc_" + video_id);
    loc.innerHTML = '<style type="text/css"> \n.st0{fill:url(#SVGID_1_);} \n.st1{fill:#F4F4F4;} \n</style>\n <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19"> \n<stop  offset="0" style="stop-color:#F8615F"></stop>\n<stop  offset="1" style="stop-color:#C1272D"></stop> \n</linearGradient> \n<path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9\nc0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29\nC72.5,33.1,71.4,36.9,69.5,40.2z"></path> \n<circle class="st1" cx="50" cy="29.1" r="10.4"></circle>';
    locations.appendChild(loc);
}
createLocation(0,0);

When I open Inspect Element, the HTML is there, but the SVG doesn't show up. When I try pasting the data manually, instead of doing it through element.innerHTML, it works as expected. Does anyone know why?

Upvotes: 1

Views: 3192

Answers (1)

Benilson
Benilson

Reputation: 734

The problem is document.createElement used for common HTML. To create SVG elements, you must use document.createElementNS specifying the namespace http://www.w3.org/2000/svg.

<style type="text/css">
    .st0{fill:url(#SVGID_1_);}
    .st1{fill:#F4F4F4;}
</style>

<svg id="scene" viewBox="0 0 1000 1000">
    <g id = "locations">
    </g>
</svg>

<script>

function createLocation(px, py, video_id = "")
{
    var locations = document.getElementById("locations");
    var loc = document.createElementNS('http://www.w3.org/2000/svg', "g");
    loc.setAttribute("id", "loc_" + video_id);
    loc.innerHTML = '<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="50" y1="6.5" x2="50" y2="88.19"> <stop offset="0" style="stop-color:#F8615F"/> <stop  offset="1" style="stop-color:#C1272D"/> </linearGradient> <path class="st0" d="M69.5,40.2L69.5,40.2C50.1,74,51.3,85.1,51.1,87.2c0,0,0,0.1,0,0.1c-0.1,0.5-0.5,0.9-1,0.9s-1-0.4-1-0.9 c0,0,0-0.1,0-0.1c-0.2-2.1,0.9-13.2-18.5-47h0c-1.9-3.3-3-7.1-3-11.2C27.5,16.6,37.6,6.5,50,6.5S72.5,16.6,72.5,29 C72.5,33.1,71.4,36.9,69.5,40.2z"/> <circle class="st1" cx="50" cy="29.1" r="10.4"/>';

    locations.appendChild(loc);
}
    createLocation(0, 0);
</script>

Upvotes: 1

Related Questions