Copying/Cloning an SVG graph under IE

Renaud · May 3, 2007

Hello,

I was wondering if anyone already succeeded to copy an existing inline
SVG element under IE.
I had troubles trying to copy it under Firefox using the innerHTML
method, for some reason the 'svg' element turned into 'SVG' and
firefox did not recognize it anymore, however using the cloneNode()
methode worked, 'svg' stayed 'svg', the graph displayed properly.

Under IE (6), none of those methods work, I'm not sure if this is the
same kind of problem since I don't know about a DOM inspector for
IE... The original svg displays correctly, using the Adobe SVG Viewer,
but not the copy.

Would anyone have a clue about that issue?

Kind regards,
Renaud

-Lost · May 4, 2007

Renaud said:
Hello,

I was wondering if anyone already succeeded to copy an existing inline
SVG element under IE.
I had troubles trying to copy it under Firefox using the innerHTML
method, for some reason the 'svg' element turned into 'SVG' and
firefox did not recognize it anymore, however using the cloneNode()
methode worked, 'svg' stayed 'svg', the graph displayed properly.

Under IE (6), none of those methods work, I'm not sure if this is the
same kind of problem since I don't know about a DOM inspector for
IE... The original svg displays correctly, using the Adobe SVG Viewer,
but not the copy.

Would anyone have a clue about that issue?

Um... I have *NO* clue about SVG. Not even the remotest knowledge aside
from the fact it is a markup language used to describe vector graphics.

Anyway, I was almost positive I saw an example here:

http://homepage.usask.ca/~ctl271/cgui/

But cannot find it again. Maybe you can get lucky and find it?

(Or then again, I could have my URLs confused. Good luck either way.)

Martin Honnen · May 5, 2007

Renaud said:
Under IE (6), none of those methods work, I'm not sure if this is the
same kind of problem since I don't know about a DOM inspector for
IE... The original svg displays correctly, using the Adobe SVG Viewer,
but not the copy.

I am able to clone an element in an inline SVG fragment with IE 6 and
Adobe SVG viewer 3:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xml:lang="en">
<head>
<title>SVG embedded inline in XHTML</title>
<object id="AdobeSVG"
classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
<script type="text/javascript">
function doTest () {
var svg = document.getElementById('svg1');
if (typeof svg.getSVGDocument != 'undefined') {
var svgDoc = svg.getSVGDocument();
var circle = svgDoc.getElementById('c1').cloneNode(true);
circle.setAttributeNS(null, 'id', 'c2');
circle.setAttributeNS(null, 'r', '20');
circle.setAttributeNS(null, 'fill', 'green');
svgDoc.documentElement.appendChild(circle);
}
}

window.onload = doTest;
</script>
</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<svg:svg id="svg1" width="300" height="200">
<svg:circle id="c1" cx="150" cy="100" r="50" fill="yellow"/>
</svg:svg>
</body>
</html>

However trying to clone and insert the complete svg:svgt id="svg1"
element in the HTML document does not work. Not sure whether anyone has
managed to do that, you might want to ask on the SVG developers group on
Yahoo groups.

Adding SVG via Javascript in Explorer	2	Apr 24, 2008
Mouse events using Javascript with SVG	6	Jul 9, 2007
future and alternatives to SVG	3	Mar 31, 2007
ANN: SVG::Graph 0.5.1	3	Apr 14, 2004
SVG as XML	6	Jun 16, 2004
JavaScript cloneNode crashing IE - don't want to use .innerHTML - JSexpert level needed	11	Sep 11, 2009
odd problem about innerHTML & img under IE	9	Nov 30, 2007
executing javascript set with innerHTML in IE 7	6	Jul 14, 2008

Copying/Cloning an SVG graph under IE

Renaud

-Lost

Martin Honnen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads