--- a/html/images/eventflow.svg Wed Jun 03 17:47:32 2009 +0900
+++ b/html/images/eventflow.svg Wed Jun 03 17:48:36 2009 +0900
@@ -1,11 +1,28 @@
-<?xml version="1.0" encoding='iso-8859-1'?>
-<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="480" viewBox="0 -10 480 560" height="560" font-family=""sansserif",sans-serif" xmlns="http://www.w3.org/2000/svg" font-size="14pt">
- <defs>
- <filter x="0" y="0" width="120%" xmlns:xlink="http://www.w3.org/1999/xlink" height="120%" id="dropShadow">
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="520" height="560" viewBox="0 0 640 690">
+
+ <title>DOM Level 3 Events: Event Flow</title>
+ <desc>Alternate description</desc>
+
+
+ <defs id="defs-1">
+ <path id="arrowhead" d="M-9,-4 L0,0 -9,4 Z" stroke-linejoin="round" stroke-linecap="round"/>
+ <marker id="blackArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
+ <use xlink:href="#arrowhead" stroke="black" fill="black" />
+ </marker>
+ <marker id="redArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
+ <use xlink:href="#arrowhead" stroke="red" fill="red" />
+ </marker>
+ <marker id="greenArrow" viewBox="-13 -5 14 10" refX="-4" markerWidth="10" markerHeight="20" orient="auto">
+ <use xlink:href="#arrowhead" stroke="green" fill="green" />
+ </marker>
+
+ <filter x="-5%" y="-5%" width="120%" height="120%" id="dropShadow">
<feGaussianBlur stdDeviation="2 2" in="SourceAlpha"/>
- <feOffset dx="2" dy="2"/>
+ <feOffset dx="4" dy="4"/>
<feComponentTransfer result="shadow">
- <feFuncA type="linear" slope=".25" intercept="0"/>
+ <feFuncA type="linear" slope=".55" intercept="0"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
@@ -13,209 +30,161 @@
</feMerge>
</filter>
- <marker refX="4" refY="1.5" orient="auto" id="arrowHead" markerHeight="9" viewBox="0 0 4 3" markerWidth="12">
- <path fill="black" d="M 0 0 L 4 1.4 L 0 3 Z" stroke="none"/>
- </marker>
- <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadCapture" viewBox="0 0 15 10" markerWidth="8">
- <path fill="red" d="M 0 0 L 15 5 L 0 10 Z"/>
- </marker>
- <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadBubbling" viewBox="0 0 15 10" markerWidth="8">
- <path fill="green" d="M 0 0 L 15 5 L 0 10 Z"/>
- </marker>
-
- <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadCapture2" viewBox="0 0 15 10" markerWidth="8">
- <path stroke-dasharray='2,1' stroke='red' fill="none" d="M 0 0 L 15 5 L 0 10 Z"/>
- </marker>
- <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadBubbling2" viewBox="0 0 15 10" markerWidth="8">
- <path fill="green" d="M 0 0 L 15 5 L 0 10 Z"/>
- </marker>
-
</defs>
-
- <rect x="-50%" y="-50%" fill="rgb(255, 255, 255)" width="200%" height="200%" stroke="black"/>
+
- <g transform="translate(50, 150)">
- <text x="50" y="12" text-anchor="middle" fill="red" class="label" stroke="none">capture</text>
- <text x="50" y="30" text-anchor="middle" fill="red" class="label" stroke="none">phase</text>
- <text x="50" y="48" text-anchor="middle" fill="red" class="label" stroke="none">(1)</text>
- </g>
- <g transform="translate(350, 150)">
- <text x="50" y="12" text-anchor="middle" fill="green" class="label" stroke="none">bubbling</text>
- <text x="50" y="30" text-anchor="middle" fill="green" class="label" stroke="none">phase</text>
- <text x="50" y="48" text-anchor="middle" fill="green" class="label" stroke="none">(3)</text>
- </g>
+ <g id="nodes" font-family="Verdana, sans-serif" font-size="18" fill="black" text-anchor="middle" stroke="none" stroke-width="2">
+ <g id="window-node" transform="translate(310, 10)">
+ <rect x="-70" y="0" width="140" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26">Window</text>
+ </g>
- <g transform="translate(190, 370)">
- <text x="50" y="12" text-anchor="middle" fill="blue" class="label" stroke="none">target</text>
- <text x="50" y="30" text-anchor="middle" fill="blue" class="label" stroke="none">phase</text>
- <text x="50" y="48" text-anchor="middle" fill="blue" class="label" stroke="none">(2)</text>
- </g>
+ <g id="document-node" transform="translate(310, 80)">
+ <rect x="-60" y="0" width="120" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26">Document</text>
+ </g>
- <g transform="translate(150, 0)">
- <line fill="none" x1="0" x2="0" y1="30" y2="60" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
- <line fill="none" x1="0" x2="0" y1="100" y2="130" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
- <line fill="none" x1="0" x2="0" y1="170" y2="200" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
- <line fill="none" x1="0" x2="0" y1="240" y2="270" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
- </g>
- <g transform="translate(250, 335)">
- <g transform="rotate(-73)">
- <line fill="none" x1="0" x2="0" y1="0" y2="30" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
+ <g id="html-node" transform="translate(310, 150)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><html></text>
+ </g>
+
+ <g id="body-node" transform="translate(310, 220)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><body></text>
+ </g>
+
+ <g id="table-node" transform="translate(310, 290)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><table></text>
+ </g>
+
+ <g id="tbody-node" transform="translate(310, 360)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><tbody></text>
+ </g>
+
+ <g id="tr_1-node" transform="translate(140, 450)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><tr></text>
+ </g>
+
+ <g id="tr_2-node" transform="translate(500, 450)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><tr></text>
+ </g>
+
+
+ <g id="tr_1_td_1-node" transform="translate(70, 540)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><td></text>
+ </g>
+
+ <g id="tr_1_td_1_text-node" transform="translate(70, 610)">
+ <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
+ <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Shady Grove</text>
+ </g>
+
+
+ <g id="tr_1_td_2-node" transform="translate(210, 540)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><td></text>
+ </g>
+
+ <g id="tr_1_td_2_text-node" transform="translate(210, 610)">
+ <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
+ <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Aeolian</text>
+ </g>
+
+
+ <g id="tr_2_td_1-node" transform="translate(430, 540)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="blue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26" fill="white"><td></text>
+ </g>
+
+ <g id="tr_2_td_1_text-node" transform="translate(430, 610)">
+ <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
+ <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">
+ <tspan x="0" y="34">Over the River,</tspan> <tspan x="0" y="54">Charlie</tspan>
+ </text>
+ </g>
+
+
+ <g id="tr_2_td_2-node" transform="translate(570, 540)">
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="lightskyblue" stroke="black" filter="url(#dropShadow)" />
+ <text x="0" y="26"><td></text>
+ </g>
+
+ <g id="tr_2_td_2_text-node" transform="translate(570, 610)">
+ <ellipse cx="0" cy="35" rx="64" ry="35" fill="steelblue" stroke="black" filter="url(#dropShadow)"/>
+ <text x="0" y="40" font-size="15" fill="white" text-anchor="middle">Dorian</text>
</g>
</g>
- <g transform="translate(320, 395)">
- <g transform="rotate(65)">
- <line fill="none" x1="0" x2="0" y1="0" y2="30" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture2)"/>
- </g>
- </g>
- <g transform="translate(330, 20)">
- <line fill="none" x1="0" x2="0" y1="60" y2="30" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
- <line fill="none" x1="0" x2="0" y1="130" y2="100" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
- <line fill="none" x1="0" x2="0" y1="200" y2="170" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
- <line fill="none" x1="0" x2="0" y1="270" y2="240" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
- </g>
- <g transform="translate(350, 320)">
- <g transform="rotate(-73)">
- <line fill="none" x1="0" x2="0" y1="30" y2="0" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
- </g>
- </g>
- <g transform="translate(350, 406)">
- <g transform="rotate(65)">
- <line stroke-dasharray="2,2" fill="none" x1="0" x2="0" y1="30" y2="0" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling2)"/>
- </g>
+
+ <g id="edges">
+ <line id="window-document" x1="310" y1="50" x2="310" y2="73" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <line id="document-html" x1="310" y1="120" x2="310" y2="143" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <line id="html-body" x1="310" y1="190" x2="310" y2="213" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <line id="body-table" x1="310" y1="260" x2="310" y2="283" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <line id="table-tbody" x1="310" y1="330" x2="310" y2="353" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <path id="tbody-tr_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
+ d="M310,400 Q310,420 260,420 H160 Q140,420 140,443"/>
+ <path id="tbody-tr_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
+ d="M310,400 Q310,420 380,420 H480 Q500,420 500,443"/>
+ <path id="tr_1-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
+ d="M140,490 Q140,510 120,510 H90 Q70,510 70,533"/>
+ <path id="tr_1-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
+ d="M140,490 Q140,510 160,510 H190 Q210,510 210,533"/>
+ <path id="tr_2-tr_2_td_1" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
+ d="M500,490 Q500,510 480,510 H450 Q430,510 430,533"/>
+ <path id="tr_2-tr_2_td_2" fill="none" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"
+ d="M500,490 Q500,510 540,510 H550 Q570,510 570,533"/>
+ <line id="tr_1_td_1-text" x1="70" y1="580" x2="70" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <line id="tr_1_td_2-text" x1="210" y1="580" x2="210" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <line id="tr_2_td_1-text" x1="430" y1="580" x2="430" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
+ <line id="tr_2_td_2-text" x1="570" y1="580" x2="570" y2="603" stroke="black" stroke-width="2" marker-end="url(#blackArrow)"/>
</g>
- <g transform="translate(180, 0)">
- <g filter="url(#dropShadow)">
- <line fill="none" x1="60" x2="60" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <path fill="none" id="Baudelaire" d="M 0 0 L 120 0 L 120 40 L 0 40 z" stroke="black" stroke-width="0.5"/>
- <text x="60" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Document</text>
- <text fill="blue" font-size="2.1pt">
- <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Baudelaire">
-Je t'adore à l'égal de la voûte nocturne,
-O vase de tristesse, ô grande taciturne,
-Et t'aime d'autant plus, belle, que tu me fuis,
-Et que tu me parais, ornement de mes nuits,
-Plus ironiquement accumuler les lieues
-Qui séparent mes bras des immensités bleues.
--- XXIV <!-- Charles Baudelaire -->
- </textPath>
- </text>
- </g>
-
- <g transform="translate(10, 70)" filter="url(#dropShadow)">
- <line fill="none" x1="50" x2="50" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <rect id='t2' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><html></text>
- </g>
-
- <g transform="translate(10, 140)" filter="url(#dropShadow)">
- <line fill="none" x1="50" x2="50" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <rect id='t3' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><body></text>
+
+ <g id="event-flow" stroke-dasharray="10,5">
+ <g id="capture_phase">
+ <text fill="red" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="150" y="220">Capture</tspan> <tspan x="150" y="240">Phase</tspan> <tspan x="150" y="260">(1)</tspan></text>
+
+ <path id="capture_phase_arrow" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
+ d="M235,28 C195,25 195,75 238,85 "/>
+ <use xlink:href="#capture_phase_arrow" x="5" y="70" />
+ <use xlink:href="#capture_phase_arrow" x="10" y="140" />
+ <use xlink:href="#capture_phase_arrow" x="10" y="210" />
+ <use xlink:href="#capture_phase_arrow" x="10" y="280" />
+ <path id="capture_phase_arrow2" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
+ d="M245,378 C205,375 205,473 428,458 "/>
+ <path id="capture_phase_arrow3" fill="none" stroke="red" stroke-width="3" marker-end="url(#redArrow)" stroke-linecap="round"
+ stroke-dasharray="none" d="M428,473 C330,470 330,533 363,548 "/>
+
</g>
- <g transform="translate(10, 210)" filter="url(#dropShadow)">
- <line fill="none" x1="50" x2="50" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <rect id='t4' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><table></text>
+ <g id="target_phase">
+ <text fill="blue" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="337" y="580">Target</tspan> <tspan x="337" y="600">Phase</tspan> <tspan x="337" y="620">(2)</tspan></text>
+
+ <rect x="-50" y="0" width="100" height="40" rx="5" ry="5" fill="none" stroke="black" stroke-width="5" stroke-dasharray="none"
+ transform="translate(430, 540)"/>
</g>
- <g transform="translate(10, 280)" filter="url(#dropShadow)">
- <rect id='t5' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><tbody></text>
- </g>
- </g>
+ <g id="bubble_phase">
+ <text fill="green" font-family="Verdana, sans-serif" font-size="20" font-weight="bold" text-anchor="middle"><tspan x="490" y="320">Bubbling</tspan> <tspan x="490" y="340">Phase</tspan> <tspan x="490" y="360">(3)</tspan></text>
- <g transform="translate(0, 350)">
- <g filter="url(#dropShadow)">
- <line fill="none" x1="240" x2="120" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <line fill="none" x1="240" x2="360" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- </g>
- <g transform="translate(70, 0)" filter="url(#dropShadow)">
- <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><tr></text>
- </g>
- <g transform="translate(310, 0)" filter="url(#dropShadow)">
- <rect id='t6' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><tr></text>
+ <path id="bubble_phase_arrow3" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
+ stroke-dasharray="none" d="M492,548 C630,483 630,470 562,473"/>
+ <path id="bubble_phase_arrow2" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
+ d="M565,457 C605,447 605,398 377,388"/>
+ <path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
+ d="M375,375 C415,372 415,332 375,322"/>
+ <use xlink:href="#bubble_phase_arrow" x="0" y="-70" />
+ <use xlink:href="#bubble_phase_arrow" x="0" y="-140" />
+ <path id="bubble_phase_arrow4" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
+ d="M375,165 C425,162 425,122 385,112"/>
+ <path id="bubble_phase_arrow" fill="none" stroke="green" stroke-width="3" marker-end="url(#greenArrow)" stroke-linecap="round"
+ d="M385,95 C435,92 435,52 395,42"/>
</g>
</g>
-
- <g transform="translate(0, 420)">
- <g filter="url(#dropShadow)">
- <line fill="none" x1="120" x2="60" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <line fill="none" x1="120" x2="180" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <line fill="none" x1="360" x2="300" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <line fill="none" x1="360" x2="420" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- </g>
- <g transform="translate(10, 0)" filter="url(#dropShadow)">
- <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><td></text>
- </g>
- <g transform="translate(130, 0)" filter="url(#dropShadow)">
- <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><td></text>
- </g>
-
- <a xlink:href='#c0' xlink:type='simple'>
- <g transform="translate(250, 0)" filter="url(#dropShadow)">
- <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <rect id='t7' x="0" y="0" fill="blue" width="100" height="40" stroke="black"/>
- <text id='t72' x="50" y="26.5" text-anchor="middle" fill="white" class="label" stroke="none"><td></text>
- </g>
- </a>
-
- <g transform="translate(370, 0)" filter="url(#dropShadow)">
- <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
- <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><td></text>
- </g>
- </g>
-
- <g font-size="12pt" transform="translate(0, 490)">
- <g transform="translate(10, 0)" filter="url(#dropShadow)">
- <ellipse fill="white" rx="55" cx="50" ry="30" cy="20" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Shady Grove</text>
- </g>
- <g transform="translate(130, 0)" filter="url(#dropShadow)">
- <ellipse fill="white" rx="55" cx="50" ry="30" cy="20" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Aeolian</text>
- </g>
- <g transform="translate(250, 0)" filter="url(#dropShadow)">
- <ellipse fill="white" rx="60" cx="50" ry="30" cy="20" stroke="black"/>
- <text x="50" y="22.5" text-anchor="middle" fill="black" class="label" stroke="none">Over the river,</text>
- <text x="50" y="38.5" text-anchor="middle" fill="black" class="label" stroke="none">Charlie</text>
- </g>
- <g transform="translate(370, 0)" filter="url(#dropShadow)">
- <ellipse fill="white" rx="55" cx="50" ry="30" cy="20" stroke="black"/>
- <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Dorian</text>
- </g>
- </g>
-
- <!-- setup -->
- <animateColor id='c0' xlink:href='#t7' begin='indefinite' attributeName='fill' from='white' to='white' end='b0.end' />
- <animateColor id='c02' xlink:href='#t72' begin='c0.begin' attributeName='fill' from='black' to='black' end='b0.end' />
-
- <!-- capture -->
- <animateColor keyTimes='0;0.3;1' id='c1' xlink:href='#Baudelaire' begin='c0.begin' attributeName='fill' values='white;red;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='c2' xlink:href='#t2' begin='c1.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='c3' xlink:href='#t3' begin='c2.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='c4' xlink:href='#t4' begin='c3.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='c5' xlink:href='#t5' begin='c4.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='c6' xlink:href='#t6' begin='c5.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
-
- <!-- target -->
- <animateColor keyTimes='0;0.3;1' id='c7' xlink:href='#t7' begin='c6.end - 4.0' attributeName='fill' values='white;blue;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='c72' xlink:href='#t72' begin='c6.end - 4.0' attributeName='fill' values='black;white;black' dur='5s' />
-
- <!-- bubble -->
- <animateColor keyTimes='0;0.3;1' id='b6' xlink:href='#t6' begin='c7.end - 1.0' attributeName='fill' values='white;green;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='b5' xlink:href='#t5' begin='b6.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='b4' xlink:href='#t4' begin='b5.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='b3' xlink:href='#t3' begin='b4.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='b2' xlink:href='#t2' begin='b3.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='b1' xlink:href='#t1' begin='b2.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
- <animateColor keyTimes='0;0.3;1' id='b0' xlink:href='#Baudelaire' begin='b1.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
-
+
</svg>