Re: Dynamic changes from javascript for text, textPath (xlink:href) and paths

[th...@kodak.com]

Hi Andrew,

Andrew Rowlands <an...@madcore.com.au> wrote on 06/27/2010 09:07:50 PM:

> I'm new to Batik (and Java for that matter).  I'm trying to make a 
> flexible applet that I can change various properties of a loaded SVG via 

> javascript functions (not ECMAscript functions in the SVG file itself 
> but JS functions in the HTML file that the java applet is embedded in).
> 
> How it currently works:
> 
> In my java applet (using JSVGCanvas) there is a function 
> updateElement(), which basically does:
> Element elem = doc.getElementById(element_id)
> elem.setAttributeNS(null, attribute, value).
> 
> This is called in javascript/HTML land by:
> 
> myObject = document.getElementById(id_of_applet);
> myObject.updateElement("svg_element_id_to_update", "fill", "yellow");
> 

> It works great for the properties I can easily reference (e.g. fill, 
> stroke, opacity) etc. but I'm struggling trying to dynamically change 
> things like text content, xlink:href for textPath to change to a 
> different path and/or updating a path definition.

    Basically you need to take a course in DOM level 2.  The xlink:href
case is pretty similar to fill/stroke, except that the first argument to
'setAttributeNS' needs to be the xlink namespace (NS stands for 
namespace).

    Text content is a bit tricker as that is stored as DOM TextNodes 
that are children of the various elements.  So you need to remove the
previous children and create and append your new text nodes.

        I'm a little unsure what 'path definition' means as that is 
typically
stored in normal attributes (i.e. 'd' attribute etc).

> Can anyone shed any light on the java required to change the contents of 

> the text field, the textPath xlink:href and path definitions?

        I hope the above helps point you in the right direction.        

Re: Dynamic changes from javascript for text, textPath (xlink:href) and paths

[Andrew Rowlands <an...@madcore.com.au>]

Hi Thomas,

> > It works great for the properties I can easily reference (e.g. fill, 
> > stroke, opacity) etc. but I'm struggling trying to dynamically change 
> > things like text content, xlink:href for textPath to change to a 
> > different path and/or updating a path definition.
> 
>     Basically you need to take a course in DOM level 2.  The xlink:href 
> case is pretty similar to fill/stroke, except that the first argument to 
> 'setAttributeNS' needs to be the xlink namespace (NS stands for namespace). 

Almost certainly, I have looked for examples of what I'm trying to do, but can't find much (for the uninitiated, at least) :) 

I have tried, e.g. elem.setAttributeNS("http://www.w3.org/1999/xlink", "href", value);  but it doesn't update the path, which leads me to my next question.. if you change the xlink:href for a textPath element, will that result in the text being redrawn on that path by Batik?

e.g. say in the SVG file there is something like:

<defs>
	<path id="curve1" d=" ... " >
	<path id="curve2" d=" ... ... " >
</defs>

<text id="textytext">
	<textPath xlink:href="#curve1" id="path1">
		disco disco boogie boogie disco disco
	</testPath>
</text>

Then if one calls the function:

 elem.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#curve2"); 

is it possible to simply switch the text to the new path without destroying that text node and recreating a new one?


>     Text content is a bit tricker as that is stored as DOM TextNodes 
> that are children of the various elements.  So you need to remove the 
> previous children and create and append your new text nodes. 

hmm this doesn't bode well for my Q above... ;)

> 
>         I'm a little unsure what 'path definition' means as that is typically 
> stored in normal attributes (i.e. 'd' attribute etc). 

What I was looking for here was a dynamic way to change the "d" attribute in the defined paths (e.g. in the defs above, dynamically changing the path).  This is similar to the wholesale changing of the paths above, but was looking to make only slight alterations to the path by modifying the d attribute.

Calling elem.setAttributeNS(null, "d", "<new path definition>");  doesn't result in the path changing.. 

Is there a refresh that needs to be triggered so it's redrawn using the new d attribute value?


> 
> > Can anyone shed any light on the java required to change the contents of 
> > the text field, the textPath xlink:href and path definitions?
> 
>         I hope the above helps point you in the right direction.        

Thanks for your response.. slowly making progress, I think ;)


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