[svg-developers] Re: create a new text element with javascript

2005-04-12 Thread tamsvg 


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/

[svg-developers] Re: create a new text element with javascript

2005-04-12 Thread Andreas Neumann 


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

[svg-developers] Re: create a new text element with javascript

2005-04-11 Thread pilatfr 


--- 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 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/