deweese 2003/07/23 02:46:14
Modified: test-resources/org/apache/batik/test interactiveSamples.xml
Added: samples/tests/spec/interactivity pointerEvents.svg
test-references/samples/tests/spec/interactivity
pointerEvents.png
Log:
New test of pointer events.
Revision Changes Path
1.1 xml-batik/samples/tests/spec/interactivity/pointerEvents.svg
Index: pointerEvents.svg
===================================================================
<?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";>
<!-- ====================================================================== -->
<!-- Copyright (C) The Apache Software Foundation. All rights reserved. -->
<!-- -->
<!-- This software is published under the terms of the Apache Software -->
<!-- License version 1.1, a copy of which has been included with this -->
<!-- distribution in the LICENSE file. -->
<!-- ====================================================================== -->
<!-- ====================================================================== -->
<!-- Tests support for pointer-events. -->
<!-- -->
<!-- @author [EMAIL PROTECTED] -->
<!-- @version $Id: pointerEvents.svg,v 1.1 2003/07/23 09:46:14 deweese Exp $ -->
<!-- ====================================================================== -->
<?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>
1.1
xml-batik/test-references/samples/tests/spec/interactivity/pointerEvents.png
<<Binary file>>
1.6 +2 -1
xml-batik/test-resources/org/apache/batik/test/interactiveSamples.xml
Index: interactiveSamples.xml
===================================================================
RCS file:
/home/cvs/xml-batik/test-resources/org/apache/batik/test/interactiveSamples.xml,v
retrieving revision 1.5
retrieving revision 1.6
diff -u -r1.5 -r1.6
--- interactiveSamples.xml 10 Jul 2003 14:25:49 -0000 1.5
+++ interactiveSamples.xml 23 Jul 2003 09:46:14 -0000 1.6
@@ -23,6 +23,7 @@
<test id="samples/tests/spec/interactivity/keyEvents.svg" >
<property name="Validating" class="java.lang.Boolean" value="false" />
</test>
+ <test id="samples/tests/spec/interactivity/pointerEvents.svg" />
</testGroup>
<testGroup id="tests.spec.scripting" name="Interactive Scripting Tests"
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
