Home | History | Annotate | Download | only in SVG 
      1 <!DOCTYPE html>
      2 <html>
      3   <head>
      4     <style>
      5       body {
      6         margin: 0px;
      7       }
      8       #container {
      9         background-color: #eee;
     10         width: 600px;
     11         height: 400px;
     12       }
     13       #title {
     14         position: absolute;
     15         top: 400px;
     16         left: 0px;
     17         font-family: sans-serif;
     18         font-size: 30px;
     19         text-align: right;
     20         width: 600px;
     21       }
     22     </style>
     23   </head>
     24   <body>
     25     <div id="wrapper">
     26       <div id="title">SVG Hit Testing</div>
     27       <div id="container">
     28         <svg id="svg" width="600" height="400" xmlns="http://www.w3.org/2000/svg" version="1.0">
     29           <g id="shapes1" transform="translate(-60, -20)">
     30             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
     31             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
     32             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
     33             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
     34             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
     35             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
     36             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
     37             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
     38             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
     39             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
     40             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
     41             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
     42           </g>
     43           <g id="shapes2" transform="translate(-30, -10)">
     44             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
     45             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
     46             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
     47             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
     48             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
     49             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
     50             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
     51             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
     52             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
     53             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
     54             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
     55             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
     56           </g>
     57           <g id="shapes3" transform="translate(0, 0)">
     58             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
     59             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
     60             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
     61             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
     62             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
     63             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
     64             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
     65             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
     66             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
     67             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
     68             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
     69             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
     70           </g>
     71           <g id="shapes4" transform="translate(30, 10)">
     72             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
     73             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
     74             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
     75             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
     76             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
     77             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
     78             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
     79             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
     80             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
     81             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
     82             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
     83             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
     84           </g>
     85           <g id="shapes5" transform="translate(60, 20)">
     86             <circle cx="100" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="all"/>
     87             <circle cx="300" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleFill" />
     88             <circle cx="500" cy="75" r="40" fill="#feae00" stroke="#f31900" stroke-width="15" pointer-events="visibleStroke" />
     89             <ellipse cx="100" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="all" />
     90             <ellipse cx="300" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleFill" />
     91             <ellipse cx="500" cy="150" rx="50" ry="40" fill="#d4ecfb" stroke="#3364c2" stroke-width="15" pointer-events="visibleStroke" />
     92             <rect x="50" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="all" />
     93             <rect x="250" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleFill" />
     94             <rect x="450" y="175" width="100" height="100" fill="#f7d72b" stroke="#db8409" stroke-width="15" pointer-events="visibleStroke" />
     95             <path d="M50,300 C75,200 75,200 100,300 S125,400 150,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="all" />
     96             <path d="M250,300 C275,200 275,200 300,300 S325,400 350,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleFill" />
     97             <path d="M450,300 C475,200 475,200 500,300 S525,400 550,300" fill="#e0fb00" stroke="#44c400" stroke-width="15" pointer-events="visibleStroke" />
     98           </g>
     99         </svg>
    100       </div>
    101     </div>
    102     <script src="../resources/runner.js"></script>
    103     <script>
    104       PerfTestRunner.measureTime({run: function() {
    105         for (var i = 0; i < 6000; i++) {
    106           var x = 600 * Math.random();
    107           var y = 400 * Math.random();
    108           var el = document.elementFromPoint(x, y);
    109         }
    110       }, done:function() {
    111         var wrapper = document.getElementById('wrapper');
    112         if (wrapper)
    113           wrapper.parentNode.removeChild(wrapper);
    114       }});
    115     </script>
    116   </body>
    117 </html>
    118