Accessing SVG DOM from HTML Javascript

[Lester]

I have a html page containing a <object id="aa" data="aa.svg" ....>.
Now what I want to do is change the color of some element inside the
svg when some link in the html doc is clicked. I'm using Javascript to
do this:

svgdoc = document.getElementById('aa').getSVGDocument();
element = svgdoc.getElementsByTagName('xxx')[0];
......

The problem is: element gives an undefined value!

I don't know how to access elements just using html javascripts (I
mean not svg javascripts).
Any ideas? Thanks.

 

[Thomas 'PointedEars' Lahn]

I have a html page containing a <object id="aa" data="aa.svg" ....>.
Now what I want to do is change the color of some element inside the
svg when some link in the html doc is clicked. I'm using Javascript to
do this:

svgdoc = document.getElementById('aa').getSVGDocument();
element = svgdoc.getElementsByTagName('xxx')[0];
.....

The problem is: element gives an undefined value!

Probably `svgdoc' gives `undefined', too, and you have two errors in the
Error Console like

| document.getElementById('aa').getSVGDocument is not a function
| svgdoc is not defined

I don't know how to access elements just using html javascripts (I
mean not svg javascripts).
Any ideas?

ISTM that getSVGDocument() is a method provided by the Adobe SVG Viewer
plugin[1] as it is not defined in W3C DOM Level 2 HTML[2] or the W3C SVG
DOM[3]. Several UAs, including Firefox 1.5+, have native SVG support, so
you need to use

var svgdoc = document.getElementById('aa').contentDocument;

for those instead.[4]

Object references should be subject to a type-converting test before being
used, and DOM methods should be feature-tested before being called.[5]

Thanks.

You're welcome.


PointedEars
___________
[1] http://support.adobe.com/devsup/devsup.nsf/docs/50523.htm
[2] http://www.w3.org/TR/DOM-Level-2-HTML/
[3] http://www.w3.org/TR/SVG11/svgdom.html
[4] http://wiki.mozilla.org/SVG:GetSVGDocument
[5] http://www.jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD

 

[Lester]

That was very helpful! Thanks!

I have a html page containing a <object id="aa" data="aa.svg" ....>.
Now what I want to do is change the color of some element inside the
svg when some link in the html doc is clicked. I'm using Javascript to
do this:

svgdoc = document.getElementById('aa').getSVGDocument();
element = svgdoc.getElementsByTagName('xxx')[0];
.....

The problem is: element gives an undefined value!

Probably `svgdoc' gives `undefined', too, and you have two errors in the
Error Console like

| document.getElementById('aa').getSVGDocument is not a function
| svgdoc is not defined

I don't know how to access elements just using html javascripts (I
mean not svg javascripts).
Any ideas?

ISTM that getSVGDocument() is a method provided by the Adobe SVG Viewer
plugin[1] as it is not defined in W3C DOM Level 2 HTML[2] or the W3C SVG
DOM[3]. Several UAs, including Firefox 1.5+, have native SVG support, so
you need to use

var svgdoc = document.getElementById('aa').contentDocument;

for those instead.[4]

Object references should be subject to a type-converting test before being
used, and DOM methods should be feature-tested before being called.[5]

Thanks.

You're welcome.

PointedEars
___________
[1]http://support.adobe.com/devsup/devsup.nsf/docs/50523.htm
[2]http://www.w3.org/TR/DOM-Level-2-HTML/
[3]http://www.w3.org/TR/SVG11/svgdom.html
[4]http://wiki.mozilla.org/SVG:GetSVGDocument
[5]http://www.jibbering.com/faq/faq_notes/not_browser_detect.html#bdFD
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

 

[Martin Honnen]

ISTM that getSVGDocument() is a method provided by the Adobe SVG Viewer
plugin[1] as it is not defined in W3C DOM Level 2 HTML[2] or the W3C SVG
DOM[3].

The SVG 1.1 specification defines it here:
<URL:http://www.w3.org/TR/SVG11/struct.html#InterfaceGetSVGDocument>

 

[Thomas 'PointedEars' Lahn]

ISTM that getSVGDocument() is a method provided by the Adobe SVG Viewer
plugin[1] as it is not defined in W3C DOM Level 2 HTML[2] or the W3C SVG
DOM[3].

The SVG 1.1 specification defines it here:
<URL:http://www.w3.org/TR/SVG11/struct.html#InterfaceGetSVGDocument>

Thanks. Are you implying that Firefox' behavior is a bug?


PointedEars

 

[Martin Honnen]

Are you implying that Firefox' behavior is a bug?

It is open here: <https://bugzilla.mozilla.org/show_bug.cgi?id=287465>