Loading ...
Sorry, an error occurred while loading the content.
 

"use" element and access to actual instance children

Expand Messages
  • richbk
    Greetings, From studying the archive, it seems to be the case that: it is impossible to access the unique instance children of a use element if we are
    Message 1 of 1 , Sep 20, 2009
      Greetings,

      From studying the archive, it seems to be the case that: it is impossible to access the unique instance children of a "use" element if we are adhering to the SVG 1.1 spec.

      Do I understand this correctly?

      Here is a short example program that does exactly what I want in Firefox 3.5. I tried to code the equivalent in Opera 10, but was maddeningly unsuccessful.

      (What I'm trying to do is change an attribute of a child of a playing card. The card was created with a "use" element. I only want to change the child attribute of the card clicked on, not all the cards.)

      Thanks very much for your consideration,
      Rick

      <?xml version="1.0"?>
      <svg
      onload="loaded();"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xmlns:svg="http://www.w3.org/2000/svg">

      <script type="text/ecmascript">
      <![CDATA[

      svgns = 'http://www.w3.org/2000/svg';
      xlinkns = 'http://www.w3.org/1999/xlink';

      function loaded() {
      var uniqueId = 0;

      var element1 = document.createElementNS( svgns, "use" );
      element1.setAttributeNS( xlinkns, "href", "#card_back_group" );
      element1.setAttribute( "id", ""+uniqueId++ );
      element1.setAttribute( "x", "50" );
      element1.setAttribute( "y", "50" );

      document.getElementById( "card_game" ).appendChild( element1 );

      var element2 = document.createElementNS( svgns, "use" );
      element2.setAttributeNS( xlinkns, "href", "#card_back_group" );
      element2.setAttribute( "id", ""+uniqueId++ );
      element2.setAttribute( "x", "200" );
      element2.setAttribute( "y", "50" );

      document.getElementById( "card_game" ).appendChild( element2 );
      }

      function click( evt ) {
      // get the child with id "card_back_interior" and
      // set attribute "visibility" to "visible"

      // works in Firefox 3.5, but not Opera 10

      var children = evt.currentTarget.childNodes;
      for ( var i = 0; i < children.length; i++ ) {
      var child = children[i];
      if ( child.id == "card_back_interior" ) {
      child.setAttribute( "visibility", "visible" );
      break;
      }
      }

      }

      // ]]>
      </script>

      <defs>
      <g id="card_back_group" onclick="click(evt)" >
      <rect id="card_frame" rx="10" ry="10" width="100"
      height="150"
      style="fill:white;stroke:gray;stroke-width:10" />
      <use id="card_back_interior" visibility="hidden"
      xlink:href="#shared_circle" />
      </g>

      <circle id="shared_circle" cx="50" cy="75" r="40" fill="red" />
      </defs>

      <g id="card_game"/>
      </svg>
    Your message has been successfully submitted and would be delivered to recipients shortly.