xlink added via scripting: a sample?

VK

unread,

Sep 27, 2006, 10:46:31 AM9/27/06

to

We are dropping Opera Tiny support in the light version of the library
so trying to migrate from event listeners to xlink's for the SVG part
(for linked elements). Any working sample of a xlink dynamically added
to a shape via scripting? The best I've found on xulplanet is below,
but it only makes the cursor change to pointer style: no navigation on
click, no status bar change on hover.

Ideally I would like not to patch shapes with xlink attributes but
rather create full-standing <a> element with the involved shape made as
its child. That would keep the tree uniformed with the VML part. Is it
doable?

var ns = 'http://www.w3.org/2000/svg';

var xlink = 'http://www.w3.org/1999/xlink';

function test() {
var canvas = document.createElementNS(ns, 'svg');
canvas.setAttribute('xmlns', ns);
canvas.setAttribute('width', 550);
canvas.setAttribute('height', 400);
canvas.setAttribute('viewBox', '0 0 '+550+' '+400);
canvas.setAttribute('preserveAspectRatio','none');

document.body.appendChild(canvas);

var circle = document.createElementNS(ns, 'circle');
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 50);

circle.setAttributeNS(xlink, 'xlink:type', 'simple');
circle.setAttributeNS(xlink, 'xlink:show', 'replace');
circle.setAttributeNS(xlink, 'xlink:href', 'http://www.mozilla.org');
circle.setAttribute('target', '_blank');

canvas.appendChild(circle);
}

window.onload = test;
</script>
</head>

<body>

</body>
</html>

Martin Honnen

unread,

Sep 27, 2006, 11:04:21 AM9/27/06

to

VK wrote:

> Ideally I would like not to patch shapes with xlink attributes but
> rather create full-standing <a> element with the involved shape made as
> its child.

XML example that works for me with Firefox 1.5 and Opera 9:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>dynamically creating an SVG link</title>
<script type="text/javascript">
function makeLink (element, url) {
var svgNS = 'http://www.w3.org/2000/svg';
var xlinkNS = 'http://www.w3.org/1999/xlink';
var link = element.ownerDocument.createElementNS(svgNS, 'a');
link.setAttributeNS(xlinkNS, 'xlink:href', url);
link.setAttributeNS(xlinkNS, 'xlink:show', 'replace');
element.parentNode.replaceChild(link, element);
link.appendChild(element);
}

window.onload = function (evt) {
makeLink(document.getElementById('c1'), 'http://example.com/');
};
</script>
</head>
<body>

<h1>dynamically creating an SVG link</h1>

</svg>

</body>
</html>

--

Martin Honnen
http://JavaScript.FAQTs.com/

VK

unread,

Sep 27, 2006, 11:46:33 AM9/27/06

to

Martin Honnen wrote:

Bingo! That was the catch: <a> is created in SVG namespace, not in the
default one or XHTML one.

As the XHTML is not an option (the library is for IE users as well via
VML), here is the "de-X'ed" algorithm which will go to the production:

var ns = 'http://www.w3.org/2000/svg';

var xlink = 'http://www.w3.org/1999/xlink';

function test() {
var canvas = document.createElementNS(ns, 'svg');
canvas.setAttribute('xmlns', ns);
canvas.setAttribute('width', 550);
canvas.setAttribute('height', 400);
canvas.setAttribute('viewBox', '0 0 '+550+' '+400);
canvas.setAttribute('preserveAspectRatio','none');

document.body.appendChild(canvas);

var circle = document.createElementNS(ns, 'circle');
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 50);

canvas.appendChild(circle);

var link = document.createElementNS(ns, 'a');
link.setAttributeNS(xlink, 'xlink:href', 'http://www.mozilla.org');
link.setAttributeNS(xlink, 'xlink:show', 'replace');
circle.parentNode.replaceChild(link, circle);
link.appendChild(circle);
}

window.onload = test;
</script>
</head>

<body>

</body>
</html>

AFAIK your code is the only one really working posted sample among
everything else one can find on the Web, including mozilla.org and
xulplanet. All other snippets are either plain wrong, or incomplete or
written for Adobe plugin.

VK

unread,

Sep 27, 2006, 12:24:27 PM9/27/06

to

VK wrote:
> Bingo! That was the catch: <a> is created in SVG namespace, not in the
> default one or XHTML one.

Despite kill me if I understant why would <a> to be an SVG element...
it's XHTML at the most, not SVG. but using any other namespace kills
the link again.

> As the XHTML is not an option (the library is for IE users as well via
> VML), here is the "de-X'ed" algorithm which will go to the production:

... but after some further investigation: first of all DOM Inspector
marks the whole linked bruch (starting with <a>) in red, that's a sure
sign that Gecko is not happy with the namespace nesting on the segment,
so it can do something funny when you are not prepared.
Secondly it automatically wraps the linked element into <g> and links
<g>.

But at least I have an initially working sample to debug, so thank you
again.

Martin Honnen

unread,

Sep 27, 2006, 1:05:42 PM9/27/06

to

VK wrote:

> VK wrote:
>
>>Bingo! That was the catch: <a> is created in SVG namespace, not in the
>>default one or XHTML one.
>
>
> Despite kill me if I understant why would <a> to be an SVG element...
> it's XHTML at the most, not SVG. but using any other namespace kills
> the link again.

I am not sure what you refer to, SVG 1.1 defines its 'a' element here:
<http://www.w3.org/TR/SVG11/linking.html#Links>

So my code created an 'a' element in the SVG namespace
http://www.w3.org/2000/svg and attributes in the XLINK namespace
http://www.w3.org/1999/xlink.

VK

unread,

Sep 27, 2006, 4:46:52 PM9/27/06

to

VK wrote:
> > As the XHTML is not an option (the library is for IE users as well via
> > VML), here is the "de-X'ed" algorithm which will go to the production:

<snip>

> ... but after some further investigation: first of all DOM Inspector
> marks the whole linked bruch (starting with <a>) in red, that's a sure
> sign that Gecko is not happy with the namespace nesting on the segment,
> so it can do something funny when you are not prepared.
> Secondly it automatically wraps the linked element into <g> and links
> <g>.

OK, I see now...
Smart guys! They just wrote another XBL binding for xlinks. That is
shame on me do not catch right away what does *this* red color mean -
while I'm doing something similar daily. This is a binding and red
color in DOM Inspector marks the anonymous content generated by
binding.

So effectively all this (roughly, accounting internal nature of the
real binding and parameters transfer) is:

var ns = 'http://www.w3.org/2000/svg';

function test() {

var canvas = document.createElementNS(ns, 'svg');
canvas.setAttribute('xmlns', ns);
canvas.setAttribute('width', 550);
canvas.setAttribute('height', 400);
canvas.setAttribute('viewBox', '0 0 '+550+' '+400);
canvas.setAttribute('preserveAspectRatio','none');

document.body.appendChild(canvas);

var circle = document.createElementNS(ns, 'circle');
circle.setAttribute('cx', 100);
circle.setAttribute('cy', 100);
circle.setAttribute('r', 50);

canvas.appendChild(circle);

canvas.style.MozBinding = 'url(xlink.xml#simple)';
}

window.onload = test;
</script>
</head>

Where xlink.xml is:

<?xml version="1.0"?>

In the real internal binding they autogenerate <svg:g> for <children/>
which is smart in case of one <a> embrassing several shapes.

That works then (xlinking in Gecko/Cairo) - up to the extend to be used
right now.