Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html lang='en'>
<head>
<title>interact-order-01-b-manual.svg</title>
<meta charset='utf-8'>
</head>
<body>
<h1>Source SVG: interact-order-01-b-manual.svg</h1>
<svg version="1.1" baseProfile="basic" id="svg-root"
width="100%" height="100%" viewBox="0 0 480 360"
<!--======================================================================-->
<!--= SVG 1.1 2nd Edition Test Case =-->
<!--======================================================================-->
<!--= Copyright 2009 World Wide Web Consortium, (Massachusetts =-->
<!--= Institute of Technology, European Research Consortium for =-->
<!--= Informatics and Mathematics (ERCIM), Keio University). =-->
<!--= All Rights Reserved. =-->
<!--======================================================================-->
<title id="test-title">$RCSfile: interact-order-01-b.svg,v $</title>
<defs>
<font-face font-family="SVGFreeSansASCII" unicode-range="U+0-7F">
<font-face-src>
<font-face-uri xlink:href="../resources/SVGFreeSans.svg#ascii"/>
</font-face-src>
</font-face>
</defs>
<g id="test-body-content" font-family="SVGFreeSansASCII,sans-serif" font-size="18">
<defs>
<script type="text/ecmascript">
function bubbleYes(evt, color){
// Get Document
var target = evt.target;
target.setAttribute('fill', '' +color);
}
function bubbleNo(evt, color){
// Get Document
var target = evt.target;
target.setAttribute('fill', '' +color);
evt.stopPropagation();
evt.preventDefault();
}
</script>
</defs>
<text font-family="Arial" font-size="40" x="60" y="45">Event bubbling - a</text>
<g id="background">
<rect fill="#EEE" stroke="#000" x="10" y="60" width="460" height="120"/>
<rect fill="#FFF" stroke="#000" x="10" y="180" width="460" height="120"/>
</g>
<g fill="#000" font-family="Arial" font-size="40">
<!-- Event bubbling (i.e., propagation) is not turned off, so
event if first processed by 'circle', but then processed by 'g',
with result that circle turns blue, but then instantaneously
turns pink. -->
<g onmouseover="bubbleYes(evt, '#F08')" onmouseout="bubbleYes(evt, 'inherit')">
<circle onmouseover="bubbleYes(evt, '#00F')" onmouseout="bubbleYes(evt, 'inherit')" cx="70" cy="120" r="50"/>
<circle onmouseover="bubbleNo(evt, '#00F')" onmouseout="bubbleNo(evt, 'inherit')" cx="70" cy="240" r="50"/>
</g>
<text x="150" y="110">
Pointer in circle,
</text>
<text x="150" y="150">
circle turns pink
</text>
<text x="150" y="230">
Pointer in circle,
</text>
<text x="150" y="270">
circle turns blue
</text>
</g>
</g>
<g font-family="SVGFreeSansASCII,sans-serif" font-size="32">
<text id="revision" x="10" y="340" stroke="none" fill="black">$Revision: 1.7 $</text>
</g>
<rect id="test-frame" x="1" y="1" width="478" height="358" fill="none" stroke="#000000"/>
<!-- comment out this watermark once the test is approved -->
<!--<g id="draft-watermark">
<rect x="1" y="1" width="478" height="20" fill="red" stroke="black" stroke-width="1"/>
<text font-family="SVGFreeSansASCII,sans-serif" font-weight="bold" font-size="20" x="240"
text-anchor="middle" y="18" stroke-width="0.5" stroke="black" fill="white">DRAFT</text>
</g>-->
</svg>
</body>
</html>