Попытка добавить данные SVG с помощью .innerHTML - PullRequest
Новая
       6

Попытка добавить данные SVG с помощью .innerHTML

0 голосов
/ 27 января 2020

Я пытаюсь динамически создавать SVG-элементы, используя element.innerHTML, но, похоже, это не работает.

Это данные SVG, которые я хочу использовать: 

<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"/>

Вот это HTML: 

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

    </g>
</svg>

И 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);

Когда я открываю Inspect Element, там есть HTML, но SVG не появляется. Когда я пытаюсь вставить данные вручную , вместо того, чтобы делать это с помощью element.inner HTML, он работает как положено. Кто-нибудь знает почему?

1 Ответ

1 голос
/ 27 января 2020

Проблема в том, что document.createElement используется для общих HTML. Для создания элементов SVG необходимо использовать document.createElementNS, указав пространство имен 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.createElement("g");
    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>
...