Changing the attributes of elements in an sXBL shadow tree

[Jason McIntosh <ze...@gmail.com>]

More confusion from my attempts to learn sXBL through Batik -

I expect the following document to render two squares, a yellow one at
(100, 0) and a blue one at (0, 100). The color assignment through the
bound elements' "color" attribute works, but I am foiled with any
attempt to change the location of the yellow rectangle through its
bound element's x and y attributes, and it instead appears at (0, 0).
(FWIW, this still happens if I try to build a transform attribute
instead.)

What am I missing?

<svg
    xmlns="http://www.w3.org/2000/svg" version="1.2"
    xmlns:xbl="http://www.w3.org/2004/xbl"
    xmlns:volity="http://volity.org"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    >

  <defs>
    <xbl:xbl>

      <xbl:definition element="volity:colored-rect">
	<xbl:handlerGroup>
	  <handler ev:event="xbl:bound" type="text/ecmascript"><![CDATA[
	  var bound_rect = evt.target;
	  var template = bound_rect.xblShadowTree;
          var shadow_rect = template.getElementById('the-rect');

	  // Set the fill, based on the bound element's 'color' attr.
	  // This works!
	  shadow_rect.setAttribute('fill', bound_rect.getAttribute('color'));

	  // Set the location, based on the bound element's x and y attrs.
	  // This doesn't work! And I don't know why...
	  shadow_rect.setAttribute('x', bound_rect.getAttribute('x'));
	  shadow_rect.setAttribute('y', bound_rect.getAttribute('y'));
	  ]]>
	  </handler>
	</xbl:handlerGroup>
	<xbl:template>
	  <rect id="the-rect"
	      width="100"
	      height="100"
	      stroke="black"
	      stroke-width="2px"
	      />
	</xbl:template>
      </xbl:definition>
    </xbl:xbl>
  </defs>

  <g>
    <volity:colored-rect x="100" y="0" color="yellow" />
  </g>

  <g transform="translate(0, 100)">
    <volity:colored-rect color="blue" />
  </g>

</svg>

-- 
Jason McIntosh
President and Founder
Volity Games
jmac@volity.com
617-792-3829

Digital Games for Analog People.
http://volity.net

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org

Re: Changing the attributes of elements in an sXBL shadow tree

[Jason McIntosh <ze...@gmail.com>]

On 11/7/06, Jason McIntosh <ze...@gmail.com> wrote:
>
> I expect the following document to render two squares, a yellow one at
> (100, 0) and a blue one at (0, 100). The color assignment through the
> bound elements' "color" attribute works, but I am foiled with any
> attempt to change the location of the yellow rectangle through its
> bound element's x and y attributes, and it instead appears at (0, 0).

Playing around with this more, I encountered something strange: If, in
the xbl:bound event handler, I add the code below to create a new <g>
outside of the shadow scope and drop the bound element inside it,
suddenly everything works. The yellow square shifts to the right by
100 units, just as I originally intended it to.

var svg_ns = "http://www.w3.org/2000/svg";
var group = document.createElementNS(svg_ns, "g");
var parent = bound_rect.parentNode;
group.appendChild(bound_rect);
parent.appendChild(group);

But the group isn't doing anything, other than simply existing. It's
not even taking any attributes for itself!

I'm happy I found a solution that I can work with for the time being,
but I have no idea why it works, and would love to hear any insight.

> <svg
>     xmlns="http://www.w3.org/2000/svg" version="1.2"
>     xmlns:xbl="http://www.w3.org/2004/xbl"
>     xmlns:volity="http://volity.org"
>     xmlns:ev="http://www.w3.org/2001/xml-events"
>     >
>
>   <defs>
>     <xbl:xbl>
>
>       <xbl:definition element="volity:colored-rect">
>         <xbl:handlerGroup>
>           <handler ev:event="xbl:bound" type="text/ecmascript"><![CDATA[
>           var bound_rect = evt.target;
>           var template = bound_rect.xblShadowTree;
>           var shadow_rect = template.getElementById('the-rect');
>
>           // Set the fill, based on the bound element's 'color' attr.
>           // This works!
>           shadow_rect.setAttribute('fill', bound_rect.getAttribute('color'));
>
>           // Set the location, based on the bound element's x and y attrs.
>           // This doesn't work! And I don't know why...
>           shadow_rect.setAttribute('x', bound_rect.getAttribute('x'));
>           shadow_rect.setAttribute('y', bound_rect.getAttribute('y'));
>           ]]>
>           </handler>
>         </xbl:handlerGroup>
>         <xbl:template>
>           <rect id="the-rect"
>               width="100"
>               height="100"
>               stroke="black"
>               stroke-width="2px"
>               />
>         </xbl:template>
>       </xbl:definition>
>     </xbl:xbl>
>   </defs>
>
>   <g>
>     <volity:colored-rect x="100" y="0" color="yellow" />
>   </g>
>
>   <g transform="translate(0, 100)">
>     <volity:colored-rect color="blue" />
>   </g>
>
> </svg>

-- 
Jason McIntosh
President and Founder
Volity Games
jmac@volity.com
617-792-3829

Digital Games for Analog People.
http://volity.net

---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org