SVG добавление дочернего элемента
Всем привет!
Есть svg-документ, в нём для некоторых g-элементов требуется загрузить контент из файла. Делаю так : var content = new DOMParser().parseFromString("<g>"+
" <rect"+
" width='1053.5891'"+
" height='291.32797'"+
" x='-178.22313'"+
" y='0.98392'"+
" id='rect3638'"+
" style='opacity:1;fill:url(#radialGradient3880);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.1880002;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' />"+
"</g>", 'application/xhtml+xml').firstChild
alert( this.childNodes.length )
this.appendChild( new SVGElement( content) )
alert( this.childNodes.length )
this.appendChild( content )
appendChild не работает append тоже не работает... помогите, в чём ошибка ?? |
document.createElementNS('http://www.w3.org/2000/svg', tag)
|
а куда деть content ?
|
а как добавить в него content ?
|
Давно не работал с SVG, обычным innerHTML должно сработать в новый SVG тэг, а потом манипулируйте как хотите.
|
обычным innerHTML не работает...
|
<!DOCTYPE html>
<html>
<head>
<script>
var parser = new DOMParser(), conteiner = parser.parseFromString('\
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">\
<g>\
<rect width="100%" height="100%" fill="red" />\
<circle cx="150" cy="100" r="80" fill="green" />\
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>\
</g>\
</svg>\
', 'text/xml').documentElement.firstElementChild;
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('svg').appendChild(conteiner);
}, false)
</script>
</head>
<body>
<svg version="1.1" baseProfile="full" id="svg" xmlns="http://www.w3.org/2000/svg">
</svg>
<body>
</html>
https://developer.mozilla.org/en/SVG...etting_Started https://developer.mozilla.org/en/DOMParser |
так вроде бы правильнее, только работать перестало :D
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" baseProfile="full" id="svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<script type="text/ECMAScript" language="javascript">
var parser = new DOMParser(), conteiner = parser.parseFromString('\
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">\
<g>\
<rect width="100%" height="100%" fill="red" />\
<circle cx="150" cy="100" r="80" fill="green" />\
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>\
</g>\
</svg>\
', 'text/xml').documentElement.firstElementChild;
document.addEventListener('DOMContentLoaded', function(){
alert(document.getElementById('main'))
document.getElementById('main').appendChild(conteiner);
}, false)
</script>
<g id="main">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</g>
</svg>
|
Во первых у меня изначально это HTML документ, а у тебя SVG. Во вторых если у тебя и так SVG документ, зачем парсить строки, разве нельзя создать просто ноды? В третих майм тайп для JS - "text/javascript".
|
мне нужно редактировать именно svg-документ
подгружать контент для нод динамически нужно для ускорения работы если в доке 1000 нод, то не обязательно они все и сразу понадобятся поэтому подгружать необходимо только те, к которым обращается пользователь |
| Часовой пояс GMT +3, время: 07:13. |