javascript - 尝试使用 .innerHTML 添加 SVG 数据

Question

我正在尝试使用 element.innerHTML 动态创建 SVG 元素，但它似乎不起作用。

这是我想要使用的 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.innerHTML 进行粘贴时，它按预期工作。有谁知道为什么吗？

Answer 1

问题是用于普通 HTML 的 document.createElement 。要创建 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.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>