svg-node-count-vs-scroll.xhtml 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en">
  5. <head>
  6. <title>SVG Scrolling Performance depends on #node is Safari?</title>
  7. <script type="text/javascript">
  8. <![CDATA[
  9. var SVG_NS = 'http://www.w3.org/2000/svg';
  10. function init() {
  11. var nodeCount = parseInt(prompt('# <rect> to generate? ', 50000));
  12. var svgRoot = document.createElementNS(SVG_NS, 'svg');
  13. for (var i = 0; i < nodeCount; i++) {
  14. var node = document.createElementNS(SVG_NS, 'rect');
  15. node.setAttribute('x', i);
  16. node.setAttribute('y', i);
  17. node.setAttribute('width', 1);
  18. node.setAttribute('height', i);
  19. node.setAttribute('fill', 'red');
  20. svgRoot.appendChild(node);
  21. }
  22. svgRoot.style.width = nodeCount + 'px';
  23. svgRoot.style.height = nodeCount + 'px';
  24. document.body.appendChild(svgRoot);
  25. }
  26. ]]>
  27. </script>
  28. </head>
  29. <body onload="init()">
  30. <h1>SVG Scrolling Performance depends on #node is Safari?</h1>
  31. </body>
  32. </html>