XML Elves

XML Elves

<community>of XML and SVG Developers</community>


use "symbol" and "use" in javascrtipt.

This is a discussion on use "symbol" and "use" in javascrtipt. within the SVG Questions forums, part of the SVG Forums category; I wan to craet "symbol" element and use "use" instation it.But in fact, it is not so simple as that ...


Go Back   XML Elves > SVG Forums > SVG Questions

use "symbol" and "use" in javascrtipt. use "symbol" and "use" in javascrtipt.

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Notices


Click here to register

Reply

 

LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 06-09-2004, 09:25 PM
wu
Guest
  
Posts: n/a
Default use "symbol" and "use" in javascrtipt.
I wan to craet "symbol" element and use "use" instation it.But in fact, it is not so simple as that I imagined.

Here is my code
Code:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" >

<svg id="thesvg" x="0" y="0" width="100%" height="100%"
	onload="Init(evt)"
	xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	a3:scriptImplementation="Adobe"
	xmlns:xlink="http://www.w3.org/1999/xlink">

	<script><![CDATA[

	var svgdoc;
	var svgnsz="http://www.w3.org/2000/svg";
	var xlnsz="http://www.w3.org/1999/xlink";
	function Init(evt)
	{
		var targ = evt.getTarget();
		svgdoc = targ.getOwnerDocument();

		createSymbol();
		useSymbol();
	}

	function createSymbol()
	{
		var df = svgdoc.createElementNS(svgnsz,"defs");

		var symb = svgdoc.createElementNS(svgnsz,"symbol");
		symb.setAttribute("id","einsym");
		symb.setAttribute("viewBox","0 0 20 30");
		symb.setAttribute("preserveAsperctRation","xMidYmid meet");

		var rc = svgdoc.createElement("rect");
		rc.setAttribute("x","0");
		rc.setAttribute("y","16");
		rc.setAttribute("width","10");
		rc.setAttribute("height","10");
		rc.setAttribute("fill","green");

		symb.appendChild(rc);
		df.appendChild(symb);
		svgdoc.appendChild(df);			
	}

	function useSymbol()
	{
		var ub = svgdoc.createElement("use");

		ub.setAttribute("x","200");
		ub.setAttribute("y","80");
		ub.setAttribute("xlink:href","#einsym");
		ub.setAttribute("width","50");
		ub.setAttribute("height","50");

		svgdoc.appendChild(ub);	
	}
]]></script>
</svg>
After these codes run , there is not any result.I don't know the wrong in where.Hope to receive your suggestion.

Wish best.Thank you.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #2 (permalink)  
Old 06-10-2004, 01:45 AM
Anonymous
Guest
  
Posts: n/a
Default use "symbol" and "use" in javascrtipt.
Two errors :
- If you copy your svg after loading, you can see that <defs> element is after <svg>
- xlink:href is not in svg namespace and in script you have to add xlink:href attribute with setAttributeNS

This code run in ASV3 + IE
Code:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > 

<svg id="thesvg" x="0" y="0" width="100%" height="100%" onload="Init(evt)" 
   xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
   a3:scriptImplementation="Adobe" 
   xmlns:xlink="http://www.w3.org/1999/xlink"> 

   <script><![CDATA[ 

   var svgdoc; 
   var svgnsz="http://www.w3.org/2000/svg"; 
   var xlnsz="http://www.w3.org/1999/xlink"; 
   function Init(evt) 
   { 
      var targ = evt.target // don't use get method for this object
      svgdoc = targ.ownerDocument // idem

      createSymbol(); 
      useSymbol(); 
   } 

   function createSymbol() 
   { 
      var df = svgdoc.createElementNS(svgnsz,"defs"); 

      var symb = svgdoc.createElementNS(svgnsz,"symbol"); 
      symb.setAttribute("id","einsym"); 
      symb.setAttribute("viewBox","0 0 20 30"); 
      symb.setAttribute("preserveAsperctRation","xMidYmid meet"); 

      var rc = svgdoc.createElement("rect"); 
      rc.setAttribute("x","0"); 
      rc.setAttribute("y","16"); 
      rc.setAttribute("width","10"); 
      rc.setAttribute("height","10"); 
      rc.setAttribute("fill","green"); 

      symb.appendChild(rc); 
      df.appendChild(symb); 
      svgdoc.firstChild.appendChild(df);      // add symbol in main svg
   } 

   function useSymbol() 
   { 
      var ub = svgdoc.createElement("use"); 

      ub.setAttribute("x","200"); 
      ub.setAttribute("y","80"); 
      ub.setAttributeNS(
        "http://www.w3.org/2000/xlink/namespace/",
        "xlink:href",
        "#einsym");  // href namespace
      ub.setAttribute("width","50"); 
      ub.setAttribute("height","50"); 

      svgdoc.firstChild.appendChild(ub);    // add use element in main svg
   } 
]]></script> 
</svg>
Michel
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #3 (permalink)  
Old 06-10-2004, 08:54 AM
wu
Guest
  
Posts: n/a
Default use "symbol" and "use" in javascrtipt.
Thanks Michel for your reply.
Though the problem has been solved,I have still sevea questions .

1

Quote:
svgdoc.firstChild.appendChild(df); // add symbol in main svg
Why do you use the "firstChild"?Here ,is the "firstChild" meaning svg root node?

2.In your code:
Quote:
var targ = evt.target // don't use get method for this object
svgdoc = targ.ownerDocument // idem
In my code:
Quote:
var targ = evt.getTarget();
svgdoc = targ.getOwnerDocument();
Do these two "svgdoc" have anything different?

3.Is there anything different between the setAttribute and setAttributeNS?In what case to msut use setAttributeNS?

By the way,In where can I find the details about the "evt"?

Oh, my question seems a lot of. I'm sorry for it .Hope not to need to take much of your time，Michel.thank you .
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #4 (permalink)  
Old 06-10-2004, 09:40 AM
Anonymous
Guest
  
Posts: n/a
Default use "symbol" and "use" in javascrtipt.
Quote:
svgdoc.firstChild.appendChild(df); // add symbol in main svg
Why do you use the "firstChild"?Here ,is the "firstChild" meaning svg root node?
Yes, svg root is first child for document
Quote:
var targ = evt.target // don't use get method for this object
svgdoc = targ.ownerDocument // idem
In my code:
var targ = evt.getTarget();
svgdoc = targ.getOwnerDocument();
Do these two "svgdoc" have anything different?
No, but for compatibility with specifications, it's better to use directly object than get method
Quote:
Is there anything different between the setAttribute and setAttributeNS?In what case to msut use setAttributeNS?
In theory, we must use only setAttributeNS :
setAttributeNS(null,"x",200) for svg namespace attribute
setAttributeNS(some namespace,some attribute,some value) for other attribute
Quote:
By the way,In where can I find the details about the "evt"?
http://www.w3.org/TR/DOM-Level-2-Eve...ents-interface

Michel
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #5 (permalink)  
Old 06-10-2004, 09:05 PM
Anonymous
Guest
  
Posts: n/a
Default use "symbol" and "use" in javascrtipt.
Thanking you for your help sincerely,Michel.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #6 (permalink)  
Old 07-13-2004, 09:07 AM
Anonymous
Guest
  
Posts: n/a
Default use "symbol" and "use" in javascrtipt.
Quote:
Originally Posted by Anonymous
Two errors :
- If you copy your svg after loading, you can see that <defs> element is after <svg>
- xlink:href is not in svg namespace and in script you have to add xlink:href attribute with setAttributeNS

This code run in ASV3 + IE
Code:
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd" > 

<svg id="thesvg" x="0" y="0" width="100%" height="100%" onload="Init(evt)" 
   xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" 
   a3:scriptImplementation="Adobe" 
   xmlns:xlink="http://www.w3.org/1999/xlink"> 

   <script><![CDATA[ 

   var svgdoc; 
   var svgnsz="http://www.w3.org/2000/svg"; 
   var xlnsz="http://www.w3.org/1999/xlink"; 
   function Init(evt) 
   { 
      var targ = evt.target // don't use get method for this object
      svgdoc = targ.ownerDocument // idem

      createSymbol(); 
      useSymbol(); 
   } 

   function createSymbol() 
   { 
      var df = svgdoc.createElementNS(svgnsz,"defs"); 

      var symb = svgdoc.createElementNS(svgnsz,"symbol"); 
      symb.setAttribute("id","einsym"); 
      symb.setAttribute("viewBox","0 0 20 30"); 
      symb.setAttribute("preserveAsperctRation","xMidYmid meet"); 

      var rc = svgdoc.createElement("rect"); 
      rc.setAttribute("x","0"); 
      rc.setAttribute("y","16"); 
      rc.setAttribute("width","10"); 
      rc.setAttribute("height","10"); 
      rc.setAttribute("fill","green"); 

      symb.appendChild(rc); 
      df.appendChild(symb); 
      svgdoc.firstChild.appendChild(df);      // add symbol in main svg
   } 

   function useSymbol() 
   { 
      var ub = svgdoc.createElement("use"); 

      ub.setAttribute("x","200"); 
      ub.setAttribute("y","80"); 
      ub.setAttributeNS(
        "http://www.w3.org/2000/xlink/namespace/",
        "xlink:href",
        "#einsym");  // href namespace
      ub.setAttribute("width","50"); 
      ub.setAttribute("height","50"); 

      svgdoc.firstChild.appendChild(ub);    // add use element in main svg
   } 
]]></script> 
</svg>
Michel
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #7 (permalink)  
Old 07-13-2004, 09:08 AM
Anonymous
Guest
  
Posts: n/a
Default use "symbol" and "use" in javascrtipt.
you are a slapper
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

Tags
javascrtipt, symbol

« Using different filters in svg! | how to create pie from data »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On


All times are GMT -6. The time now is 09:33 PM.

Contact Us - XML Elves - Cars - MapPoint 2009 - Chicago - Product Marketing - Archive - Top

Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0

Ink Cartridges For Inkjet Printers
It is much cheaper to buy ink cartridges for inkjet printers online.

hard disk drive data recovery lancashire
Data Clinic's dedicated Customer Service and excellent hard disk drive data recovery extend even to Lancashire and surroundings.

ink cartridges Free UK Delivery on ink cartridges such as Canon, Dell, Epson, hp & Lexmark.

1 2 3 4 5 6 7 8 9 10