svg-node-count-vs-scroll.xhtml - Android社区 - https://www.androidos.net.cn/

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en">
 <head>
  <title>SVG Scrolling Performance depends on #node is Safari?</title>

  <script type="text/javascript">
  <![CDATA[

  var SVG_NS = 'http://www.w3.org/2000/svg';

  function init() {
    var nodeCount = parseInt(prompt('# <rect> to generate? ', 50000));

    var svgRoot = document.createElementNS(SVG_NS, 'svg');

    for (var i = 0; i < nodeCount; i++) {
      var node = document.createElementNS(SVG_NS, 'rect');
      node.setAttribute('x', i);
      node.setAttribute('y', i);
      node.setAttribute('width', 1);
      node.setAttribute('height', i);
      node.setAttribute('fill', 'red');

      svgRoot.appendChild(node);
    }

    svgRoot.style.width = nodeCount + 'px';
    svgRoot.style.height = nodeCount + 'px';
    document.body.appendChild(svgRoot);
  }

  ]]>
  </script>
 </head>

 <body onload="init()">
   <h1>SVG Scrolling Performance depends on #node is Safari?</h1>
 </body>
</html>