Нажмите SVG String в Dom?

У меня есть переменная JavaScript, которая в основном выглядит следующим образом:Нажмите SVG String в Dom?

my_svg_image = '<circle cx="227.58331298828125" cy="102" r="3" style="fill:black;stroke-width:0" />';

Он был загружен из моей базы данных. Есть ли способ, которым я могу разобрать эту строку и добавить ее в DOM с Javascript? У меня setup svgweb, но не вижу, как я могу заставить его разобрать эту строку. Есть ли другие библиотеки, которые могут помочь?

источник

2010-06-15 Colin

DOM, на который вы ссылаетесь: это встроенный или встроенный svg в html - или автономный svg? –

Извините, я хочу сделать изображение, описанное в строке, на странице. – Colin

Вы пытались javascript's innerHTML?

Редактировать: Вы можете использовать свойство innerHTML только для элементов html, поэтому вы можете использовать строку, содержащую изображение svg, чтобы добавить его в элемент html. Но вы не можете добавить элемент svg к существующему элементу svg.

Пример:

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" 
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> 
    <head> 
     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/> 
    <script type="text/javascript"> 
    <![CDATA[  
    function test() { 
     var newsvg = document.getElementById("svg-wrapper"); 
     var svgstr = '<svg:svg height="300" width="700" id="svg-container"><svg:circle cx="150px" cy="100px" r="30px" /></svg:svg>'; 
     newsvg.innerHTML = svgstr; 
    } 
    ]]> 
    </script> 
    <title>SVG DOM</title> 
</head> 
<body> 
    <div id="svg-wrapper"></div> 
    <input type="button" onclick="javascript:test();" value="generate svg"/><br/> 
</body> 
</html>

Если вы хотите добавить круг в существующем встроенный SVG, вы должны добавить его с помощью методов DOM (и prbably первого синтаксического вашей строки, чтобы извлечь нужные значения атрибутов).

источник

2010-06-16 05:47:33

Более наглядно ... какой тег я должен добавить? – Colin

Я отредактировал свой ответ, чтобы использовать innerHTML clearer –

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

var $contentToReplace = $('svg .some-class'); 
$contentToReplace.empty(); 

var content = new DOMParser().parseFromString(newContent, 'text/xml'); 

// content.children is an HTMLCollection, so using Array.prototype.slice to make a copy. if you 
// don't make a copy, items will be removed from content.children each time appendChild is called, 
// which will mess up the loop iteration 
var children = Array.prototype.slice.call(content.children); 
for (var i = 0; i < children.length; i++) { 
    $contentToReplace.get(0).appendChild(children[i]); 
}

Вы можете проверить, как они это делали в Canvg - просто для поиска метода ParseXML.

Вы также можете передать в другой метод MIME types методу parseFromString. Поддержка браузеров на них немного отличается, например, например, тип MIME 'image/svg + xml' не поддерживается в IE9 или ранее.

Изменение типа MIME просто изменяет тип документа, который вы возвращаете. Использование 'text/xml' возвращает XMLDocument, который, как представляется, отлично работает в этом случае.

источник

2014-09-27 03:48:20 dmccabe

Нажмите SVG String в Dom?

ответ

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