svg-deep-clone-to-new-doc.html [plain text]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- To run this test: Open this page, close the window, and (hopefully) don't crash.-->
<script>
function gc()
{
if (window.GCController)
GCController.collect();
else
for (var i = 0; i < 10000; ++i) ({});
}
window.onload = init;
function init() {
var iframe = document.getElementById("iframe");
var thesvgdiv = document.getElementById('thediv');
var theclone = thesvgdiv.cloneNode(true);
iframe.contentDocument.body.appendChild(theclone);
setTimeout(function() {
iframe.style.display = 'none';
iframe.parentNode.removeChild(iframe);
gc();
window.close();
}, 500);
}
</script>
</head>
<body>
<div>
<div id="thediv">
<svg id="thesvg" width="12cm" height="3.6cm" viewBox="0 0 1000 300">
<defs>
<lineargradient id="orange_red" x2="0" y2="1" >
<stop stop-color="yellow" />
<stop offset="1" stop-color="red" />
</lineargradient>
</defs>
<path id="MyPath" d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" fill="none" stroke="red" />
<text font-family="Verdana" font-size="72.5" fill="url(#orange_red)" >
<textpath xlink:href="#MyPath"> Look mom, SVG in HTML! </textpath>
</text>
(If you had an HTML5 compliant browser, the previous text would be colored and on a path.)
</svg>
</div>
<div>
<iframe id="iframe" width="50%" height="50%"></iframe>
</div>
</div>
</body>
</html>