Вы на самом деле в значительной степени там.
Вторым аргументом для createElementNS должен быть тип создаваемого элемента (круг), а не идентификатор (зеленый круг), например
var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
Вместо этого вы можете установить идентификатор с помощью setAttributeNS.
shape.setAttributeNS(null, 'id', 'greencircle');
Кроме того, добавьте svgDocument.documentElement, а не просто svgDocument, иначе вы получите ошибку:
svgDocument.documentElement.appendChild(shape);
Кроме того, если вы еще не лучший способ быстро протестировать все это, используйте Chrome или Safari на рабочем столе с включенными инструментами разработчика. Упрощает отладку.
Итак, если вы работаете с файлами, упомянутыми в предыдущем вопросе о манипулировании SVG , вы можете создать прототип с помощью:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG</title>
<script>
function make_circle() {
// test new Javascript code here before compacting it
var svgDocument=document.getElementById('circle').getSVGDocument();
var shape=svgDocument.createElementNS('http://www.w3.org/2000/svg', 'circle');
shape.setAttributeNS(null, 'id', 'greencircle');
shape.setAttributeNS(null, 'cx', 25);
shape.setAttributeNS(null, 'cy', 25);
shape.setAttributeNS(null, 'r', 20);
shape.setAttributeNS(null, 'fill', 'green');
svgDocument.documentElement.appendChild(shape);
}
</script>
</head>
<body>
<!-- click on link to test the code -->
<a onclick='make_circle();'>Change color</a>
<object id="circle" data="circle.svg" width="250" height="250" type="image/svg+xml"/>
</body>
</html>
Очевидно, что таким способом вы не сможете проверить ни одно из событий касания. (
С точки зрения лучшего способа, когда ваш Javascript становится все более сложным, возможно, стоит подумать, как сохранить все в отдельном файле .js в комплекте приложений, а затем загрузить его в веб-представление, создав и вставив динамически созданный тег. со строкойByEvaluatingJavaScriptFromString.