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 8 <script type="text/javascript"> 9 <![CDATA[ 10 11 var SVG_NS = 'http://www.w3.org/2000/svg'; 12 13 function init() { 14 var nodeCount = parseInt(prompt('# <rect> to generate? ', 50000)); 15 16 var svgRoot = document.createElementNS(SVG_NS, 'svg'); 17 18 for (var i = 0; i < nodeCount; i++) { 19 var node = document.createElementNS(SVG_NS, 'rect'); 20 node.setAttribute('x', i); 21 node.setAttribute('y', i); 22 node.setAttribute('width', 1); 23 node.setAttribute('height', i); 24 node.setAttribute('fill', 'red'); 25 26 svgRoot.appendChild(node); 27 } 28 29 svgRoot.style.width = nodeCount + 'px'; 30 svgRoot.style.height = nodeCount + 'px'; 31 document.body.appendChild(svgRoot); 32 } 33 34 ]]> 35 </script> 36 </head> 37 38 <body onload="init()"> 39 <h1>SVG Scrolling Performance depends on #node is Safari?</h1> 40 </body> 41 </html> 42 43