use "symbol" and "use" in javascrtipt.

06-09-2004, 09:25 PM

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
<?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.

Anonymous

06-10-2004, 01:45 AM

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

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

06-10-2004, 08:54 AM

Thanks Michel for your reply.
Though the problem has been solved,I have still sevea questions .

1

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:
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?

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 .

Anonymous

06-10-2004, 09:40 AM

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
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
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
By the way,In where can I find the details about the "evt"?
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface

Michel

Anonymous

06-10-2004, 09:05 PM

Thanking you for your help sincerely,Michel.

Anonymous

07-13-2004, 09:07 AM

Anonymous

07-13-2004, 09:08 AM

you are a slapper