'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?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source