<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
          "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<!--

   Licensed to the Apache Software Foundation (ASF) under one or more
   contributor license agreements.  See the NOTICE file distributed with
   this work for additional information regarding copyright ownership.
   The ASF licenses this file to You under the Apache License, Version 2.0
   (the "License"); you may not use this file except in compliance with
   the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

-->

<!-- ====================================================================== -->
<!-- Tests support for pointer-events.                                      -->
<!--                                                                        -->
<!-- @author deweese@apache.org                                             -->
<!-- @version $Id$ -->
<!-- ====================================================================== -->

<?xml-stylesheet type="text/css" href="../../resources/style/test.css" ?>

<svg id="svg-root" width="450" height="500"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" >

   <title id="test-title">Test 'pointer-events' property</title>
   <text x="50%" y="30" class="title">Test 'pointer-events' property</text>

   <script type="text/ecmascript"><![CDATA[
    function getFillFill(e) {
       var g = e.parentNode;
       var lc = g.lastChild;
       while (lc) {
          if (lc.nodeName == "rect") break;
          lc = lc.previousSibling;
       }
       return lc;
    }

    function getFillStroke(e) {
       var f = getFillFill(e);
       if (f) f = f.previousSibling;
       while (f) {
          if (f.nodeName == "rect") break;
          f = f.previousSibling;
       }
       return f;
    }

    function getStrokeFill(e) {
       var f = getFillStroke(e);
       if (f) f = f.previousSibling;
       while (f) {
          if (f.nodeName == "rect") break;
          f = f.previousSibling;
       }
       return f;
    }

    function getStrokeStroke(e) {
       var f = getStrokeFill(e);
       if (f) f = f.previousSibling;
       while (f) {
          if (f.nodeName == "rect") break;
          f = f.previousSibling;
       }
       return f;
    }

    function setFillFill(evt, color) {
        var f = getFillFill(evt.target);
        f.setAttribute("fill", color);
        evt.stopPropagation();
    }

    function setFillStroke(evt, color) {
        var f = getFillStroke(evt.target);
        f.setAttribute("fill", color);
        evt.stopPropagation();
    }
    function setStrokeStroke(evt, color) {
        var f = getStrokeStroke(evt.target);
        f.setAttribute("fill", color);
        evt.stopPropagation();
    }

    function setStrokeFill(evt, color) {
        var f = getStrokeFill(evt.target);
        f.setAttribute("fill", color);
        evt.stopPropagation();
    }

    function onDone() {
      try {
          regardTestInstance.scriptDone();   
      } catch (e) {
          alert("This button only works when run in the regard framework");
      } 
    }
    function regardStart () {
       document.getElementById("done").setAttribute("visibility", "visible");
    }
   ]]></script>

  <g id="done" transform="translate(380, 10)" 
     cursor="pointer" onclick="onDone()" visibility="hidden" >
    <rect rx="5" ry="5" width="60" height="25" fill="#EEE" stroke="#000" />
    <text x="30" y="18" font-size="14" 
      font-weight="bold" text-anchor="middle">Done</text>
    </g>

  <g id="content" transform="translate(-5,-5)">
    <g id="painted" pointer-events="painted" transform="translate(0,50)">
      <rect x="10" y="0" width="440" height="50" fill="#DDD" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">Painted</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="fill" pointer-events="fill" transform="translate(0,100)">
      <rect x="10" y="0" width="440" height="50" fill="#CCC" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">Fill</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="stroke" pointer-events="stroke" transform="translate(0,150)">
      <rect x="10" y="0" width="440" height="50" fill="#DDD" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">Stroke</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="all" pointer-events="all" transform="translate(0,200)">
      <rect x="10" y="0" width="440" height="50" fill="#CCC" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">All</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="none" pointer-events="none" transform="translate(0,250)">
      <rect x="10" y="0" width="440" height="50" fill="#DDD" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">None</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="visible" pointer-events="visible" transform="translate(0,300)">
      <rect x="10" y="0" width="440" height="50" fill="#CCC" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">Visible</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="visiblePainted" pointer-events="visiblePainted" 
      transform="translate(0,350)">
      <rect x="10" y="0" width="440" height="50" fill="#DDD" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">VisiblePainted</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="visibleFill" pointer-events="visibleFill" 
      transform="translate(0,400)">
      <rect x="10" y="0" width="440" height="50" fill="#CCC" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">VisibleFill</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>

    <g id="visibleStroke" pointer-events="visibleStroke" 
      transform="translate(0,450)">
      <rect x="10" y="0" width="440" height="50" fill="#DDD" stroke="#000"/>
      <line x1="100" y1="0" x2="100" y2="50" stroke="#000" />
      <line x1="170" y1="0" x2="170" y2="50" stroke="#000" />
      <line x1="240" y1="0" x2="240" y2="50" stroke="#000" />
      <line x1="310" y1="0" x2="310" y2="50" stroke="#000" />
      <line x1="380" y1="0" x2="380" y2="50" stroke="#000" />
      <text x="20" y="30">VisibleStroke</text>

      <g transform="translate(100,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(170,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(240,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="black" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(310,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" 
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>

      <g transform="translate(380,0)">
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setStrokeStroke(evt,'crimson')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setStrokeStroke(evt,'gold')"/>
        <ellipse cx="16" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setStrokeFill(evt,'crimson')"/>

        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="0"
          fill="none" stroke="none" pointer-events="fill"
          onmouseover="setFillFill(evt,'crimson')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="white" stroke="black" visibility="hidden"
          onmouseover="setFillFill(evt,'gold')"/>
        <ellipse cx="44" cy="25" rx="10" ry="17.5" stroke-width="5"
          fill="none" stroke="none" pointer-events="stroke"
          onmouseover="setFillStroke(evt,'crimson')"/>

        <rect x="60" y="4" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="14" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="26" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
        <rect x="60" y="36" width="10" height="10" 
          stroke-width="1" stroke="#000" fill="#888"/>
      </g>
    </g>
  </g>
</svg>
