Comment accéder aux sous-éléments d'un tag <svg:use> depuis javascript?

J'ai le code SVG suivant dans une page XHTMLComment accéder aux sous-éléments d'un tag <svg:use> depuis javascript?

<svg:svg> 
<svg:svg width="450" heigth="450" viewBox="0 0 500 500"> 
    <svg:defs> 
     <svg:g id='mygroup'> 
      <svg:circle id='a' cx="15" cy="15" r='15' fill="green" fill-opacity="0.3"/> 
      <svg:line id='b' x1="15" y1="15" x2="15" y2="0" style="stroke: black;" /> 
     </svg:g> 
</svg:defs> 

<svg:rect width="400" height="400" fill="white" stroke="black" /> 
<svg:use id="g1" xlink:href="#mygroup" x="100" y="100" onclick="moveMe()" /> 
<svg:use id="g2" xlink:href="#mygroup" x="100" y="200" /> 
</svg:svg>

et je voudrais modifier le suivant code javascript

<script><![CDATA[ 
    function moveMe(){ 
    obj = document.getElementById("g1"); 
    obj.setAttributeNS(null, "x", "200"); //Ok it works 

    //How can I change the color of the a circle in g1? 
    obj = document.getElementById("g1.a"); 
    obj.setAttributeNS(null, "fill", "red"); //It doesn't work 
    } 
]]></script>

Comment puis-je changer la couleur du « un » cercle dans 'g1'? Comment puis-je y accéder à partir de mon code javascript?

EDIT: Si j'ai un deuxième élément de groupe appelé g2, je ne veux pas changer sa couleur.

Source

2009-10-07 luc

Je ne suis pas un expert en svg mais de l'apparence des choses, votre JavaScript manipule le DOM, qui est la forme non expansé, donc pas, vous pouvez Ne changez pas de groupe et demandez-le à g1 mais pas à g2. Vous devrez créer une copie de mygroup, et joindre g1 à une copie et g2 à l'autre. Ensuite, vous pouvez les manipuler indépendamment. – Alohci

Une solution simple est de passer d'une couleur à l'aide du mot-clé 'currentColor' comme ceci:

<svg:svg> 
<svg:svg width="450" heigth="450" viewBox="0 0 500 500"> 
<svg:defs> 
    <svg:g id='mygroup'> 
     <svg:circle id='a' cx="15" cy="15" r='15' fill="currentColor" fill-opacity="0.3"/> 
     <svg:line id='b' x1="15" y1="15" x2="15" y2="0" style="stroke: black;" /> 
    </svg:g> 
</svg:defs> 

<svg:rect width="400" height="400" fill="white" stroke="black" /> 
<svg:use id="g1" xlink:href="#mygroup" x="100" y="100" onclick="moveMe()" color="green"/> 
<svg:use id="g2" xlink:href="#mygroup" x="100" y="200" color="blue"/> 
</svg:svg>

Si vous souhaitez changer les couleurs, vous pouvez simplement changer l'attribut 'color' sur l'élément 'use' ents. Ou tout simplement utiliser les CSS pour le faire, par exemple:

<style> 
#g1:hover { color: lime } 
</style>

Source

2009-10-08 07:28:19

bien! Je ne le savais pas. Mais une chose: dans votre exemple, vous ne pouvez pas définir une couleur par défaut pour les cercles. Par exemple. vous voulez avoir tout # vert, et seulement en cliquant sur # g1 il devrait devenir rouge. Est-ce possible? –

Cela fonctionne parfaitement. Merci beaucoup pour cette solution élégante – luc

@ räph: Il est possible d'appliquer la couleur par défaut avec CSS, de sorte que tous les éléments d'usage qui ont un nom de classe particulier obtiennent l'ensemble 'couleur' par défaut, par exemple:.myInstances {couleur: fuchsia;/* la couleur par défaut * /} De cette façon, vous n'avez besoin de définir la couleur qu'une seule fois, plutôt que sur chaque élément 'use'. En ce qui concerne le clic, eh bien, peut-être que si le changement d'état est non statique, vous pouvez utiliser une pseudo-classe active pour le définir, mais il peut être préférable d'assigner un nom de classe supplémentaire à la place. –

Remplacer

obj = document.getElementById("g1.a");

avec

obj = document.getElementById("a");

depuis l'id de l'élément de cercle est un et non g1.a.

iN document.getElementById (id)

id is a case-sensitive string representing the unique ID of the element 
being sought.

Source

2009-10-07 06:41:45 rahul

Thnaks pour cette réponse. Cela fonctionne dans l'exemple original mais voir ma modification. – luc

Je pense que vous appelez la fonction moveme sur le clic de g1 seulement. Alors quel est le problème pour g2. – rahul

En fait, le problème est que la couleur change sur g1 et g2. Je voudrais le changer seulement pour g1. Est-ce possible? – luc

Vous pouvez obtenir le comportement souhaité en utilisant css.

Ajoutez ceci à votre code html-tête:

<style type="text/css"> 
    .g1red #a {fill:red} 
</style>

utiliser ce code de script:

<script><![CDATA[ 
function moveMe(){ 
obj = document.getElementById("g1"); 
obj.setAttributeNS(null, "x", "200"); 
obj.setAttributeNS(null, "class", "g1red"); 
} 
]]></script>

Source

2009-10-08 07:03:03

Comment accéder aux sous-éléments d'un tag <svg:use> depuis javascript?

Répondre

Questions connexes