JavaScript рендеринга SVG из текста

У меня есть SVG элемент как обычный текстJavaScript рендеринга SVG из текста

<svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
</svg>

Как я могу вынести это на HTML странице, вставив его с JavaScript/JQuery без воссоздавать каждый узел с

document.createElementNS("http://www.w3.org/2000/svg", "svg")

(иначе это не будет отображаться)

источник

2016-02-20 Entimon

попробуйте следующий код.

var svg = '<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="30px" height="30px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">'+  
    '<path fill="#156BB1" d="M22.906,10.438c0,4.367-6.281,14.312-7.906,17.031c-1.719-2.75-7.906-12.665-7.906-17.031S10.634,2.531,15,2.531S22.906,6.071,22.906,10.438z"/>'+ 
    '<circle fill="#FFFFFF" cx="15" cy="10.677" r="3.291"/></svg>'; 

    var mysvg = new Image(); 
    mysvg.src = 'data:image/svg+xml,' + escape(svg);

, а затем использовать mysvg переменную, чтобы поместить его там, где когда-либо вы хотите в вашем HTML.

источник

2016-02-20 10:38:10 pavlos

сделать это с помощью JQuery:

var str = '<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>' 

$("body").append(str)

рабочий код here

источник

2016-02-20 10:38:43 Cyril

Используйте innerHTML, чтобы вставить его.

document.documentElement.innerHTML = '<svg height="100" width="100">\n <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />\n</svg>'

источник

2016-02-20 10:39:07

JavaScript рендеринга SVG из текста

ответ

Смежные вопросы