jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

before port to png

Browse source
This commit is contained in:
Ilya Kantor 2015-04-18 00:58:09 +03:00
parent 651a08b270
commit ca2adc84ba
60 changed files with 206 additions and 384 deletions
Download patch file Download diff file Expand all files Collapse all files

391
2-ui/2-events-and-interfaces/4-event-bubbling/eventflow.svg
View file

@ -1,194 +1,199 @@
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" 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="4" dy="4"/>
<feComponentTransfer result="shadow">
<feFuncA type="linear" slope=".55" intercept="0"/>
</feComponentTransfer>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<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)">
<a xlink:href="../DOM3-Events.html#glossary-window" target="_parent">
<rect x="-70" y="0" width="140" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">Window</text>
</a>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="641px" height="633px" viewBox="0 0 641 633" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: bin/sketchtool 1.3 (252) - http://www.bohemiancoding.com/sketch -->
<title>eventflow.svg</title>
<desc>Created with bin/sketchtool.</desc>
<defs></defs>
<g id="combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="eventflow.svg" sketch:type="MSArtboardGroup">
<g id="eventflow" sketch:type="MSLayerGroup" transform="translate(22.000000, 28.000000)">
<g id="nodes">
<g id="Window-node" transform="translate(224.684713, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" sketch:type="MSShapeGroup" x="0" y="0" width="134.426752" height="34.5671642"></rect>
<text id="Window" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="39.3678344" y="21.9134328">Window</tspan>
</text>
</g>
</g>
<g id="document-node" transform="translate(234.286624, 60.492537)">
<g id="Group">
<rect id="Rectangle-path" stroke="#000000" fill="#DCDCDC" sketch:type="MSShapeGroup" x="0" y="0" width="115.22293" height="34.5671642"></rect>
<text id="Document" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="22.0843949" y="21.9134328">Document</tspan>
</text>
</g>
</g>
<g id="html-node" transform="translate(243.888535, 120.985075)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;html&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;html&gt;</tspan>
</text>
</g>
<g id="body-node" transform="translate(243.888535, 181.477612)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;body&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;body&gt;</tspan>
</text>
</g>
<g id="table-node" transform="translate(243.888535, 241.970149)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;table&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="23.044586" y="21.9134328">&lt;table&gt;</tspan>
</text>
</g>
<g id="tbody-node" transform="translate(243.888535, 302.462687)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tbody&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="19.2038217" y="21.9134328">&lt;tbody&gt;</tspan>
</text>
</g>
<g id="tr_1-node" transform="translate(80.656051, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="35.5270701" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_2-node" transform="translate(426.324841, 380.238806)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;tr&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;tr&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1-node" transform="translate(13.442675, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="31.6863057" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_1_text-node" transform="translate(0.000000, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Shady-Grove" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
<tspan x="19.2038217" y="34.6044776" fill="#000000">Shady Grove</tspan>
</text>
</g>
<g id="tr_1_td_2-node" transform="translate(147.869427, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_1_td_2_text-node" transform="translate(134.426752, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Aeolian" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
<tspan x="36.9673567" y="34.6044776" fill="#000000">Aeolian</tspan>
</text>
</g>
<g id="tr_2_td_1-node" transform="translate(359.111465, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#0000FF" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Consolas" font-size="15.5552239" font-weight="normal">
<tspan x="27.8455414" y="22.3701493" fill="#000000">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_1_text-node" transform="translate(345.668790, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<g id="Group" transform="translate(12.482484, 15.555224)" font-size="12.9626866" font-family="Helvetica" fill="#FFFFFF" sketch:type="MSTextLayer" font-weight="normal">
<text id="Over-the-River,">
<tspan x="0.480095541" y="13" fill="#000000">Over the River,</tspan>
</text>
<text id="Charlie">
<tspan x="25.9251592" y="30.2835821" fill="#000000">Charlie</tspan>
</text>
</g>
</g>
<g id="tr_2_td_2-node" transform="translate(493.538217, 458.014925)">
<rect id="Rectangle-path" stroke="#000000" fill="#87CEFA" sketch:type="MSShapeGroup" x="0" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
<text id="&lt;td&gt;" fill="#000000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="15.5552239" font-weight="normal">
<tspan x="33.6066879" y="21.9134328">&lt;td&gt;</tspan>
</text>
</g>
<g id="tr_2_td_2_text-node" transform="translate(480.095541, 518.507463)">
<ellipse id="Oval" stroke="#000000" fill="#4682B4" sketch:type="MSShapeGroup" cx="61.4522293" cy="30.2462687" rx="61.4522293" ry="30.2462687"></ellipse>
<text id="Dorian" fill="#FFFFFF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="12.9626866" font-weight="normal">
<tspan x="39.8479299" y="34.6044776" fill="#000000">Dorian</tspan>
</text>
</g>
</g>
<g id="edges" transform="translate(61.452229, 34.567164)" stroke="#000000" stroke-width="2" sketch:type="MSShapeGroup">
<path d="M230.44586,0 L230.44586,19.8761194" id="window-document" fill="#000000"></path>
<path d="M230.44586,60.4925373 L230.44586,80.3686567" id="document-html" fill="#000000"></path>
<path d="M230.44586,120.985075 L230.44586,140.861194" id="html-body" fill="#000000"></path>
<path d="M230.44586,181.477612 L230.44586,201.353731" id="body-table" fill="#000000"></path>
<path d="M230.44586,241.970149 L230.44586,261.846269" id="table-tbody" fill="#000000"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 214.442675,319.746269 182.436306,319.746269 L86.4171975,319.746269 C73.6146497,319.746269 67.2133758,326.371642 67.2133758,339.622388" id="tbody-tr_1"></path>
<path d="M230.44586,302.462687 C230.44586,313.985075 252.850318,319.746269 297.659236,319.746269 L393.678344,319.746269 C406.480892,319.746269 412.882166,326.371642 412.882166,339.622388" id="tbody-tr_2"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 60.8121019,397.522388 48.0095541,397.522388 L19.2038217,397.522388 C6.40127389,397.522388 0,404.147761 0,417.398507" id="tr_1-tr_2_td_1"></path>
<path d="M67.2133758,380.238806 C67.2133758,391.761194 73.6146497,397.522388 86.4171975,397.522388 L115.22293,397.522388 C128.025478,397.522388 134.426752,404.147761 134.426752,417.398507" id="tr_1-tr_2_td_2"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 406.480892,397.522388 393.678344,397.522388 L364.872611,397.522388 C352.070064,397.522388 345.66879,404.147761 345.66879,417.398507" id="tr_2-tr_2_td_1"></path>
<path d="M412.882166,380.238806 C412.882166,391.761194 425.684713,397.522388 451.289809,397.522388 L460.89172,397.522388 C473.694268,397.522388 480.095541,404.147761 480.095541,417.398507" id="tr_2-tr_2_td_2"></path>
<path d="M0,458.014925 L0,477.891045" id="tr_1_td_1-text" fill="#000000"></path>
<path d="M134.426752,458.014925 L134.426752,477.891045" id="tr_1_td_2-text" fill="#000000"></path>
<path d="M345.66879,458.014925 L345.66879,477.891045" id="tr_2_td_1-text" fill="#000000"></path>
<path d="M482.015924,458.014925 L482.015924,477.891045" id="tr_2_td_2-text" fill="#000000"></path>
</g>
<g id="event-flow" transform="translate(103.700637, 14.691045)">
<g id="target_phase" transform="translate(186.277070, 443.323881)">
<text id="Target" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="0.960191083" y="34.1477612" fill="#000000">Target</tspan>
</text>
<text id="Phase" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="0.480095541" y="51.4313433" fill="#000000">Phase</tspan>
</text>
<text id="(2)" fill="#0000FF" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="15.8431529" y="68.7149254" fill="#000000">(2)</tspan>
</text>
<rect id="Rectangle-path" stroke="#000000" stroke-width="5" sketch:type="MSShapeGroup" x="69.133758" y="0" width="96.0191083" height="34.5671642" rx="5"></rect>
</g>
<g id="capture_phase">
<text id="Capture" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="0" y="166.367164" fill="#000000">Capture</tspan>
</text>
<text id="Phase" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="7.20143312" y="183.650746" fill="#000000">Phase</tspan>
</text>
<text id="(1)" fill="#FF0000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="22.5644904" y="200.934328" fill="#000000">(1)</tspan>
</text>
<path d="M116.183121,0.864179104 C77.7754777,-1.72835821 77.7754777,41.480597 119.063694,50.1223881" id="capture_phase_arrow" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup"></path>
<g id="capture_phase_arrow-link" transform="translate(92.178344, 60.492537)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 120.985075)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 181.477612)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<g id="capture_phase_arrow-link" transform="translate(96.979299, 241.970149)" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup">
<path d="M28.8057325,0.864179104 C-9.60191083,-1.72835821 -9.60191083,41.480597 31.6863057,50.1223881" id="capture_phase_arrow"></path>
</g>
<path d="M125.785032,303.326866 C87.3773885,300.734328 87.3773885,385.423881 301.5,372.461194" id="capture_phase_arrow2" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup"></path>
<path d="M301.5,385.423881 C207.401274,382.831343 207.401274,437.274627 239.08758,450.237313" id="capture_phase_arrow3" stroke="#FF0000" stroke-width="3" sketch:type="MSShapeGroup"></path>
</g>
<g id="bubble_phase" transform="translate(250.609873, 12.962687)">
<text id="Bubbling" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="72.9745223" y="239.822388" fill="#000000">Bubbling</tspan>
</text>
<text id="Phase" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="83.0565287" y="257.10597" fill="#000000">Phase</tspan>
</text>
<text id="(3)" fill="#008000" sketch:type="MSTextLayer" font-family="Helvetica" font-size="17.2835821" font-weight="normal">
<tspan x="98.419586" y="274.389552" fill="#000000">(3)</tspan>
</text>
<path d="M112.342357,437.274627 C244.848726,381.102985 244.848726,369.868657 179.555732,372.461194" id="bubble_phase_arrow3" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
<path d="M182.436306,358.634328 C220.843949,349.992537 220.843949,307.647761 1.92038217,299.00597" id="bubble_phase_arrow2" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
<path d="M0,287.771642 C38.4076433,285.179104 38.4076433,250.61194 0,241.970149" id="bubble_phase_arrow" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 181.477612)" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<g id="bubble_phase_arrow-link" transform="translate(0.000000, 120.985075)" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup">
<path d="M0,45.8014925 C38.4076433,43.2089552 38.4076433,8.64179104 0,0" id="bubble_phase_arrow"></path>
</g>
<path d="M0,106.29403 C48.0095541,103.701493 48.0095541,69.1343284 9.60191083,60.4925373" id="bubble_phase_arrow4" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
<path d="M9.60191083,45.8014925 C57.611465,43.2089552 57.611465,8.64179104 19.2038217,0" id="bubble_phase_arrow" stroke="#008000" stroke-width="3" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</g>
</g>
<g id="document-node" transform="translate(310, 80)">
<a xlink:href="../DOM3-Events.html#glossary-document" target="_parent">
<rect x="-60" y="0" width="120" height="40" fill="gainsboro" stroke="black" filter="url(#dropShadow)" />
<text x="0" y="26">Document</text>
</a>
</g>
<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">&lt;html&gt;</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">&lt;body&gt;</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">&lt;table&gt;</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">&lt;tbody&gt;</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">&lt;tr&gt;</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">&lt;tr&gt;</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">&lt;td&gt;</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">&lt;td&gt;</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">&lt;td&gt;</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">&lt;td&gt;</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 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 id="event-flow" stroke-dasharray="10,5">
<g id="capture_phase">
<a xlink:href="../DOM3-Events.html#glossary-capture-phase" target="_parent"><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></a>
<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 id="target_phase">
<a xlink:href="../DOM3-Events.html#glossary-target-phase" target="_parent"><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></a>
<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 id="bubble_phase">
<a xlink:href="../DOM3-Events.html#glossary-bubbling-phase" target="_parent"><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></a>
<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>
</svg>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before After
Before After