Comment créer dynamiquement une g élément svg

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;bottom:  -220px;right: 180px;">
</object>
</body>
<script type="text/javascript">
var far=document.getElementById("oo")
far.addEventListener("load", function (){
var svgDoc=far.contentDocument;
var svgRoot=svgDoc.documentElement;
document.getElementById("bar").onclick=function(){
var g = svgDoc.createElementNS("http://www.w3.org/2000/svg", "g");
g.setAttribute('id', 'group');
g.setAttribute('shape-rendering', 'inherit');
g.setAttribute('pointer-events', 'all');
var use = svgDoc.createElementNS("http://www.w3.org/2000/svg", "use")
use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")
use.setAttributeNS(null,"id", "u")
svgRoot.appendChild(use)
var create_bar=svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect")
create_bar.setAttribute("id", "r_bar")
create_bar.setAttribute("fill", "cream")
create_bar.setAttribute("x", "300px")
create_bar.setAttribute("y", "50px")
create_bar.setAttribute("width", "100px")
create_bar.setAttribute("height", "30px")
create_bar.setAttribute("pointer-events", "inherit")
g.appendChild(create_bar)
var cir = svgDoc.createElementNS("http://www.w3.org/2000/svg", "circle");
cir.setAttribute( "id","cir")
cir.setAttribute( "cx","320px")
cir.setAttribute( "cy","65px")
cir.setAttribute( "r","10px")
cir.setAttribute('fill', 'red')
cir.setAttribute('pointer-events', 'inherit')
g.appendChild(cir)
svgRoot.appendChild(g)
}
var btn_id=document.getElementById('bar2')
btn_id.onclick=function()
{
var a=svgDoc.getElementById('r_bar')
var b=svgDoc.getElementById('group')
var c=svgDoc.getElementById('cir')
var d=svgDoc.getElementById('u')
alert(a.id+".."+b.id+".."+c.id+".."+d.id)
}
},false)
</script>
<input type="button" id="bar" value="Ribbon_Bar">
<input type="button" id="bar2" value="ID">
</html>
Cette question doit avoir été mis à jour/modifiés depuis qu'il a été posté. Il n'est plus question, et il n'a pas les erreurs que la réponse de points.

OriginalL'auteur Zain | 2010-10-25

  1. 9

    Je pense que c'est la cause de l'erreur:

    utilisation.setAttribute('xlink:href','g1')

    La syntaxe correcte est:

    use.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#g1")

    Fondamentalement, vous êtes absent un hashmark pour le lien, et vous devez utiliser l'espace de noms courant setAttributeNS.

    Concernant setAttribute, vous devez être conscient que l'utilisation de préfixes, il n'est pas recommandé. De DOM 3 de Base (le dernier paragraphe de cette section):

    DOM Niveau 1 sont les méthodes d'espace de noms
    ignorants. Par conséquent, s'il est sécuritaire
    l'utilisation de ces méthodes ne traitent pas
    avec des espaces de noms, de les utiliser et de les
    de nouveaux en même temps, devraient être
    évitée.

    j'ai mis à jour le code d'Erik, mais toujours pas de progrès...! j'ai chnge le code et mise à jour de la nouvelle..veuillez jeter un oeil ...Gentiment
    Erik, Voici l'essentiel de la fonctionnalité que je veux intégrer dans l'application web. Avec la souris, l'utilisateur peut dessiner un rectangle autour des objets svg, donc la sélection de tous les objets. Tous ces objets seront regroupés ensuite, et si l'utilisateur le désire, il peut déplacer le groupe à l'autre de la position et de tous les objets à l'intérieur du groupe se déplacent à l'unisson (maintien de leur distance à partir de/à l'eachother). Espérons que ce croquis le genre de fonctionnalités que je suis en train de mettre en œuvre.
    Où est l'entourant html+scripts? Si vous êtes en essayant de capturer les événements de la souris sur un <object> ou <embed> tag par exemple alors que c'est pas d'aller travailler. Est-ce que votre gestionnaire onclick appelée? (vérifiez l'e.g avec une alerte).
    <body> <object id="oo" data="Dynamic_grouping.svg" style="position:fixed;width: 900px;height:750px;en bas: -220px;à droite: 180px;"> </object> </body>
    oui mon onlick gestionnaire est appelé.....! il fonctionne correctement . je pense qu'il y a un problème dans une certaine Dynamique de création problème peu....!

    OriginalL'auteur Erik Dahlström