hi,
if you are new to SVG / JS / DOM you might find the following tutorial useful: http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/ a good reference of the available objects with their corresponding properties and methods is http://phrogz.net/ObjJob/objects.asp?langID=1 good luck, andreas --- In svg-developers@yahoogroups.com, "tamsvg" <[EMAIL PROTECTED]> wrote: > > Thank you Jonathan and Michel, > > but where can I find those things about javascript? Do you know a good > javascript reference in the net? Or a good book about that? > > tam > > > --- In svg-developers@yahoogroups.com, Jonathan Watt <[EMAIL PROTECTED]> wrote: > > This code is very unportable. A lot of the function calls you are > > using will only work in ASV. Not only should you make the changes > > suggested by Michel, but you should also do the following: > > > > * add the xmlns to root <svg> tag > > (Mozilla needs this) > > * add xmlns:xlink to the root <svg> tag > > * removed the type attribute from the <script> tag > > (text/javascript won't work in Batik) > > * change .getTarget() to .target > > * change .getFirstChild() to .firstChild > > * change .getParentNOde() to .parentNOde > > These are ASV specific - use the properties, not function calls > > * change .createElement() to .createElementNS() > > You need to create the element in the correct namespace or it's just > > a generic XML > > element > > * don't break your lines in middle of a string > > > > If you make those changes your code should be as follows, and it > > should work in Mozilla and Batik as well as ASV. > > > > <svg xmlns="http://www.w3.org/2000/svg"; > > xmlns=xmlns:xlink="http://www.w3.org/1999/xlink"; > > width="800" heigth="300"> > > <script> > > > > function mouseClick(evt) { > > var elem = evt.target; > > var svgdoc = elem.ownerDocument; > > var rect = svgdoc.createElementNS ('http://www.w3.org/2000/svg', > 'rect'); > > rect.setAttribute('x',300); > > rect.setAttribute('y',100); > > rect.setAttribute('width',200); > > rect.setAttribute('height',150); > > > rect.setAttribute('style','stroke:grey;fill:rgb (200,200,200);stroke-width:2'); > > > > var text = svgdoc.createElementNS ('http://www.w3.org/2000/svg', > 'text'); > > text.setAttribute('x',310); > > text.setAttribute('y',130); > > text.setAttribute('style','font-size:7pt'); > > text.setAttribute('id','text'); > > var child = text.firstChild; > > var data = svgdoc.createTextNode("Data :") > > text.appendChild(data); > > > > var parent = elem.parentNode; > > parent.appendChild(rect); > > parent.appendChild(text); > > } > > > > </script> > > <circle cx="20" cy="20" r="10" onclick="mouseClick(evt)" > style="fill:black"/> > > </svg> > > > > > > On Apr 11, 2005 5:00 PM, pilatfr <[EMAIL PROTECTED]> wrote: > > > > > > > > > --- In svg-developers@yahoogroups.com, "tamsvg" > > > <[EMAIL PROTECTED]> wrote: > > > > > > You can use > > > > > > var text = svgdoc.createElement('text'); > > > text.setAttribute('x',310); > > > text.setAttribute('y',130); > > > text.setAttribute('style','font-size:7pt'); > > > text.setAttribute('id','text'); > > > data = svgdoc.createTextNode("Data :") > > > text.appendChild(data); > > > .... > > > > > > or > > > > > > parse string for your text element > > > str = "<text id='text' x='310' y='130' style='font- size:7pt'>Data : > > > </text>" > > > text = parseXML(str , svgdoc) > > > > > > Michel > > > > > > > Hi! > > > > > > > > I need to create a new text element with javascript after clicking > > > on > > > > a circle. To create a new rect or something else is no problem, but > > > > how can I set the data for the new text? > > > > > > > > This is my code: > > > > > > > > <svg width="800" heigth="300"> > > > > > > > > <script type="text/javascript"> > > > > > > > > function mouseClick(evt) { > > > > var elem = evt.getTarget(); > > > > var svgdoc = elem.getOwnerDocument(); > > > > var rect = svgdoc.createElement('rect'); > > > > rect.setAttribute('x',300); > > > > rect.setAttribute('y',100); > > > > rect.setAttribute('width',200); > > > > rect.setAttribute('height',150); > > > > rect.setAttribute('style','stroke:grey;fill:rgb (200,200,200); > > > > stroke-width:2'); > > > > > > > > var text = svgdoc.createElement('text'); > > > > text.setAttribute('x',310); > > > > text.setAttribute('y',130); > > > > text.setAttribute('style','font-size:7pt'); > > > > text.setAttribute('id','text'); > > > > var child = text.getFirstChild(); > > > > var data = 'Data: '; > > > > child.setData(data); > > > > > > > > var parent = elem.getParentNode(); > > > > parent.appendChild(rect); > > > > parent.appendChild(text); > > > > } > > > > > > > > </script> > > > > > > > > <circle cx="20" cy="20" r="10" onclick="mouseClick(evt)" > > > > style="fill:black"/> > > > > </svg> > > > > > > > > > > > > I tried it with text.setData(data) and with child.setData (data) > > > but it > > > > doesn't work. > > > > > > > > Has anybody an idea? > > > > > > > > tam > > > > > > ----- > > > To unsubscribe send a message to: > [EMAIL PROTECTED] > > > -or- > > > visit http://groups.yahoo.com/group/svg-developers and click "edit > my membership" > > > ---- > > > Yahoo! Groups Links > > > > > > > > > > > > > > > ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
