svg-deep-clone-to-new-doc.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <!-- To run this test: Open this page, close the window, and (hopefully) don't crash.-->
  6. <script>
  7. function gc()
  8. {
  9. if (window.GCController)
  10. GCController.collect();
  11. else
  12. for (var i = 0; i < 10000; ++i) // Allocate a sufficient number of objects to force a GC.
  13. ({});
  14. }
  15. window.onload = init;
  16. function init() {
  17. var iframe = document.getElementById("iframe");
  18. var thesvgdiv = document.getElementById('thediv');
  19. var theclone = thesvgdiv.cloneNode(true);
  20. iframe.contentDocument.body.appendChild(theclone);
  21. setTimeout(function() {
  22. iframe.style.display = 'none';
  23. iframe.parentNode.removeChild(iframe);
  24. gc();
  25. window.close();
  26. }, 500);
  27. }
  28. </script>
  29. </head>
  30. <body>
  31. <div>
  32. <div id="thediv">
  33. <svg id="thesvg" width="12cm" height="3.6cm" viewBox="0 0 1000 300">
  34. <defs>
  35. <lineargradient id="orange_red" x2="0" y2="1" >
  36. <stop stop-color="yellow" />
  37. <stop offset="1" stop-color="red" />
  38. </lineargradient>
  39. </defs>
  40. <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" />
  41. <text font-family="Verdana" font-size="72.5" fill="url(#orange_red)" >
  42. <textpath xlink:href="#MyPath"> Look mom, SVG in HTML! </textpath>
  43. </text>
  44. (If you had an HTML5 compliant browser, the previous text would be colored and on a path.)
  45. </svg>
  46. </div>
  47. <div>
  48. <iframe id="iframe" width="50%" height="50%"></iframe>
  49. </div>
  50. </div>
  51. </body>
  52. </html>