Форум

zaytsewa · #1 (**permalink**) 15.06.2011, 13:49

Всем привет!

Есть 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 тоже не работает...
помогите, в чём ошибка ??

Nekromancer · #2 (**permalink**) 15.06.2011, 14:10

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

zaytsewa · #3 (**permalink**) 15.06.2011, 14:46

а куда деть content ?

zaytsewa · #4 (**permalink**) 15.06.2011, 14:49

а как добавить в него content ?

Nekromancer · #5 (**permalink**) 15.06.2011, 15:38

Давно не работал с SVG, обычным innerHTML должно сработать в новый SVG тэг, а потом манипулируйте как хотите.

zaytsewa · #6 (**permalink**) 15.06.2011, 16:12

обычным innerHTML не работает...

Nekromancer · #7 (**permalink**) 15.06.2011, 18:20

<!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

zaytsewa · #8 (**permalink**) 15.06.2011, 21:07

так вроде бы правильнее, только работать перестало

<?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>

Nekromancer · #9 (**permalink**) 15.06.2011, 22:04

Во первых у меня изначально это HTML документ, а у тебя SVG. Во вторых если у тебя и так SVG документ, зачем парсить строки, разве нельзя создать просто ноды? В третих майм тайп для JS - "text/javascript".

zaytsewa · #10 (**permalink**) 15.06.2011, 22:08

мне нужно редактировать именно svg-документ
подгружать контент для нод динамически нужно для ускорения работы
если в доке 1000 нод, то не обязательно они все и сразу понадобятся
поэтому подгружать необходимо только те, к которым обращается пользователь

Форум

Справочник

Discord чат

Курсы javascript