addlines.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="500">
<defs>
<style type="text/css"><![CDATA[
  .borderLine {
	   stroke: none;
	   fill-opacity: 0.4;
  }
  .outLine {
	   stroke-width: 1;
	   fill: none;
  }
  .circle {
	   stroke: #888888;
	   stroke-width: 0.5;
	   fill: none;
    pointer-events: all;
  }
  .spcircle {
	   stroke: #FF2222;
	   stroke-width: 1;
	   fill: none;
    pointer-events: all;
  }
  .tLabel {
	   font-family: Arial;
    pointer-events: none;
	   font-size: 14px;
	   text-anchor: middle;
	   alignment-baseline: central;
  }
  .nLabel {
	   font-family: Arial;
    pointer-events: none;
	   font-size: 10px;
	   text-anchor: middle;
	   alignment-baseline: central;
  }
  .belong {
	   font-family: Arial;
    pointer-events: none;
	   font-size: 5px;
	   text-anchor: middle;
	   alignment-baseline: central;
  }
  .p0{
    stroke: none;
    fill: #e6194b;
  }
  .q0{
    fill: none;
    stroke: #e6194b;
  }
  .p1{
    stroke: none;
    fill: #3cb44b;
  }
  .q1{
    fill: none;
    stroke: #3cb44b;
  }
  .p2{
    stroke: none;
    fill: #ffe119;
  }
  .q2{
    fill: none;
    stroke: #ffe119;
  }
  .p3{
    stroke: none;
    fill: #0082c8;
  }
  .q3{
    fill: none;
    stroke: #0082c8;
  }
  .p4{
    stroke: none;
    fill: #f58231;
  }
  .q4{
    fill: none;
    stroke: #f58231;
  }
  .p5{
    stroke: none;
    fill: #911eb4;
  }
  .q5{
    fill: none;
    stroke: #911eb4;
  }
  .p6{
    stroke: none;
    fill: #46f0f0;
  }
  .q6{
    fill: none;
    stroke: #46f0f0;
  }
  .p7{
    stroke: none;
    fill: #f032e6;
  }
  .q7{
    fill: none;
    stroke: #f032e6;
  }
]]>
</style>
<symbol id="bl0">
<path d="M 150.85 144.04 L 165.79 289.40 L 270.20 339.92 L 336.33 343.54 L 391.65 238.01 L 335.33 131.68 Z" />
</symbol>
<symbol id="bl1">
<path d="M 266.71 207.61 L 277.80 405.81 L 461.09 387.28 L 454.11 320.44 L 335.33 131.68 L 269.83 141.40 Z" />
</symbol>
<symbol id="bl2">
<path d="M 210.94 171.95 L 213.88 423.63 L 379.61 434.26 L 391.65 238.01 L 214.34 105.14 Z" />
</symbol>
<symbol id="bl3">
<path d="M 38.91 10.00 L 150.85 144.04 L 330.84 274.03 L 389.80 304.31 L 387.85 171.76 Z" />
</symbol>
<symbol id="bl4">
<path d="M 105.28 262.30 L 213.88 423.63 L 397.00 370.25 L 330.84 274.03 Z" />
</symbol>
<symbol id="bl5">
<path d="M 330.84 274.03 L 456.22 253.18 L 396.52 106.00 Z" />
</symbol>
<symbol id="bl6">
<path d="M 154.92 388.01 L 456.22 253.18 L 330.84 274.03 L 204.06 343.51 Z" />
</symbol>
<symbol id="bl7">
<path d="M 454.11 320.44 L 527.45 -56.37 Z" />
</symbol>
</defs>
<!-- isDone: 0 -->
<rect width="700" height="500" style="fill:#fff;stroke-width:0" />
<use class="p0 borderLine" xlink:href="#bl0"/>
<use class="p1 borderLine" xlink:href="#bl1"/>
<use class="p2 borderLine" xlink:href="#bl2"/>
<use class="p3 borderLine" xlink:href="#bl3"/>
<use class="p4 borderLine" xlink:href="#bl4"/>
<use class="p5 borderLine" xlink:href="#bl5"/>
<use class="p6 borderLine" xlink:href="#bl6"/>
<use class="p7 borderLine" xlink:href="#bl7"/>
<use class="q0 outLine" xlink:href="#bl0"/>
<use class="q1 outLine" xlink:href="#bl1"/>
<use class="q2 outLine" xlink:href="#bl2"/>
<use class="q3 outLine" xlink:href="#bl3"/>
<use class="q4 outLine" xlink:href="#bl4"/>
<use class="q5 outLine" xlink:href="#bl5"/>
<use class="q6 outLine" xlink:href="#bl6"/>
<use class="q7 outLine" xlink:href="#bl7"/>
<circle onclick="fromCircle(1)" class="circle" cx="208.3173" cy="238.6330" r="33.1843" />
<text class="tLabel" x="208.32" y="218.63"></text>
<text class="nLabel" x="208.32" y="233.63">40</text>
<text class="belong" x="208.32" y="243.63">(1)</text>
<circle onclick="fromCircle(3)" class="circle" cx="335.3303" cy="131.6822" r="5.2469" />
<text class="tLabel" x="335.33" y="111.68"></text>
<text class="nLabel" x="335.33" y="126.68">1</text>
<text class="belong" x="335.33" y="136.68">(1, 2)</text>
<circle onclick="fromCircle(7)" class="spcircle" cx="391.6532" cy="238.0143" r="5.2469" />
<text class="tLabel" x="391.65" y="218.01"></text>
<text class="nLabel" x="391.65" y="233.01">1</text>
<text class="belong" x="391.65" y="243.01">(1, 2, 3)</text>
<circle onclick="fromCircle(15)" class="circle" cx="266.7129" cy="207.6143" r="7.4202" />
<text class="tLabel" x="266.71" y="187.61"></text>
<text class="nLabel" x="266.71" y="202.61">2</text>
<text class="belong" x="266.71" y="212.61">(1, 2, 3, 4)</text>
<circle onclick="fromCircle(127)" class="circle" cx="330.8387" cy="274.0306" r="12.8522" />
<text class="tLabel" x="330.84" y="254.03"></text>
<text class="nLabel" x="330.84" y="269.03">6</text>
<text class="belong" x="330.84" y="279.03">(1, 2, 3, 4, 5, 6, 7)</text>
<circle onclick="fromCircle(2)" class="circle" cx="461.0853" cy="387.2820" r="5.2469" />
<text class="tLabel" x="461.09" y="367.28"></text>
<text class="nLabel" x="461.09" y="382.28">1</text>
<text class="belong" x="461.09" y="392.28">(2)</text>
<circle onclick="fromCircle(6)" class="circle" cx="277.8048" cy="405.8112" r="9.0879" />
<text class="tLabel" x="277.80" y="385.81"></text>
<text class="nLabel" x="277.80" y="400.81">3</text>
<text class="belong" x="277.80" y="410.81">(2, 3)</text>
<circle onclick="fromCircle(14)" class="spcircle" cx="332.6565" cy="207.8186" r="13.8820" />
<text class="tLabel" x="332.66" y="187.82"></text>
<text class="nLabel" x="332.66" y="202.82">7</text>
<text class="belong" x="332.66" y="212.82">(2, 3, 4)</text>
<circle onclick="fromCircle(10)" class="circle" cx="389.8025" cy="304.3093" r="14.8405" />
<text class="tLabel" x="389.80" y="284.31"></text>
<text class="nLabel" x="389.80" y="299.31">8</text>
<text class="belong" x="389.80" y="309.31">(2, 4)</text>
<circle onclick="fromCircle(18)" class="circle" cx="396.9998" cy="370.2493" r="11.7324" />
<text class="tLabel" x="397.00" y="350.25"></text>
<text class="nLabel" x="397.00" y="365.25">5</text>
<text class="belong" x="397.00" y="375.25">(2, 5)</text>
<circle onclick="fromCircle(130)" class="circle" cx="454.1129" cy="320.4363" r="5.2469" />
<text class="tLabel" x="454.11" y="300.44"></text>
<text class="nLabel" x="454.11" y="315.44">1</text>
<text class="belong" x="454.11" y="325.44">(2, 8)</text>
<circle onclick="fromCircle(4)" class="circle" cx="379.6083" cy="434.2642" r="9.0879" />
<text class="tLabel" x="379.61" y="414.26"></text>
<text class="nLabel" x="379.61" y="429.26">3</text>
<text class="belong" x="379.61" y="439.26">(3)</text>
<circle onclick="fromCircle(5)" class="spcircle" cx="264.5257" cy="273.8747" r="9.0879" />
<text class="tLabel" x="264.53" y="253.87"></text>
<text class="nLabel" x="264.53" y="268.87">3</text>
<text class="belong" x="264.53" y="278.87">(1, 3)</text>
<circle onclick="fromCircle(13)" class="circle" cx="210.9430" cy="171.9549" r="11.7324" />
<text class="tLabel" x="210.94" y="151.95"></text>
<text class="nLabel" x="210.94" y="166.95">5</text>
<text class="belong" x="210.94" y="176.95">(1, 3, 4)</text>
<circle onclick="fromCircle(12)" class="circle" cx="214.3398" cy="105.1376" r="10.4938" />
<text class="tLabel" x="214.34" y="85.14"></text>
<text class="nLabel" x="214.34" y="100.14">4</text>
<text class="belong" x="214.34" y="110.14">(3, 4)</text>
<circle onclick="fromCircle(20)" class="circle" cx="213.8839" cy="423.6313" r="11.7324" />
<text class="tLabel" x="213.88" y="403.63"></text>
<text class="nLabel" x="213.88" y="418.63">5</text>
<text class="belong" x="213.88" y="428.63">(3, 5)</text>
<circle onclick="fromCircle(21)" class="circle" cx="270.2032" cy="339.9211" r="11.7324" />
<text class="tLabel" x="270.20" y="319.92"></text>
<text class="nLabel" x="270.20" y="334.92">5</text>
<text class="belong" x="270.20" y="344.92">(1, 3, 5)</text>
<circle onclick="fromCircle(8)" class="circle" cx="38.9147" cy="10.0000" r="5.2469" />
<text class="tLabel" x="38.91" y="-10.00"></text>
<text class="nLabel" x="38.91" y="5.00">1</text>
<text class="belong" x="38.91" y="15.00">(4)</text>
<circle onclick="fromCircle(9)" class="circle" cx="150.8485" cy="144.0357" r="13.8820" />
<text class="tLabel" x="150.85" y="124.04"></text>
<text class="nLabel" x="150.85" y="139.04">7</text>
<text class="belong" x="150.85" y="149.04">(1, 4)</text>
<circle onclick="fromCircle(11)" class="circle" cx="269.8280" cy="141.4026" r="9.0879" />
<text class="tLabel" x="269.83" y="121.40"></text>
<text class="nLabel" x="269.83" y="136.40">3</text>
<text class="belong" x="269.83" y="146.40">(1, 2, 4)</text>
<circle onclick="fromCircle(40)" class="circle" cx="387.8484" cy="171.7570" r="5.2469" />
<text class="tLabel" x="387.85" y="151.76"></text>
<text class="nLabel" x="387.85" y="166.76">1</text>
<text class="belong" x="387.85" y="176.76">(4, 6)</text>
<circle onclick="fromCircle(16)" class="circle" cx="105.2833" cy="262.3047" r="5.2469" />
<text class="tLabel" x="105.28" y="242.30"></text>
<text class="nLabel" x="105.28" y="257.30">1</text>
<text class="belong" x="105.28" y="267.30">(5)</text>
<circle onclick="fromCircle(17)" class="circle" cx="165.7900" cy="289.4050" r="11.7324" />
<text class="tLabel" x="165.79" y="269.40"></text>
<text class="nLabel" x="165.79" y="284.40">5</text>
<text class="belong" x="165.79" y="294.40">(1, 5)</text>
<circle onclick="fromCircle(19)" class="spcircle" cx="336.3339" cy="343.5430" r="11.7324" />
<text class="tLabel" x="336.33" y="323.54"></text>
<text class="nLabel" x="336.33" y="338.54">5</text>
<text class="belong" x="336.33" y="348.54">(1, 2, 5)</text>
<circle onclick="fromCircle(80)" class="circle" cx="204.0647" cy="343.5050" r="5.2469" />
<text class="tLabel" x="204.06" y="323.51"></text>
<text class="nLabel" x="204.06" y="338.51">1</text>
<text class="belong" x="204.06" y="348.51">(5, 7)</text>
<circle onclick="fromCircle(32)" class="circle" cx="396.5213" cy="105.9979" r="7.4202" />
<text class="tLabel" x="396.52" y="86.00"></text>
<text class="nLabel" x="396.52" y="101.00">2</text>
<text class="belong" x="396.52" y="111.00">(6)</text>
<circle onclick="fromCircle(96)" class="circle" cx="456.2152" cy="253.1780" r="5.2469" />
<text class="tLabel" x="456.22" y="233.18"></text>
<text class="nLabel" x="456.22" y="248.18">1</text>
<text class="belong" x="456.22" y="258.18">(6, 7)</text>
<circle onclick="fromCircle(64)" class="circle" cx="154.9211" cy="388.0114" r="10.4938" />
<text class="tLabel" x="154.92" y="368.01"></text>
<text class="nLabel" x="154.92" y="383.01">4</text>
<text class="belong" x="154.92" y="393.01">(7)</text>
<rect class="p0 borderLine" x="500.00" y="50.00" width="30.00" height="15.00" />
<rect class="q0" x="500.00" y="50.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="65.00">Ball2017</text>
<rect class="p1 borderLine" x="500.00" y="90.00" width="30.00" height="15.00" />
<rect class="q1" x="500.00" y="90.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="105.00">Courtois2015</text>
<rect class="p2 borderLine" x="500.00" y="130.00" width="30.00" height="15.00" />
<rect class="q2" x="500.00" y="130.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="145.00">Hilton2017</text>
<rect class="p3 borderLine" x="500.00" y="170.00" width="30.00" height="15.00" />
<rect class="q3" x="500.00" y="170.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="185.00">Ball2017</text>
<rect class="p4 borderLine" x="500.00" y="210.00" width="30.00" height="15.00" />
<rect class="q4" x="500.00" y="210.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="225.00">Ball2017</text>
<rect class="p5 borderLine" x="500.00" y="250.00" width="30.00" height="15.00" />
<rect class="q5" x="500.00" y="250.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="265.00">Ball2017</text>
<rect class="p6 borderLine" x="500.00" y="290.00" width="30.00" height="15.00" />
<rect class="q6" x="500.00" y="290.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="305.00">Courtois2015</text>
<rect class="p7 borderLine" x="500.00" y="330.00" width="30.00" height="15.00" />
<rect class="q7" x="500.00" y="330.00" width="30.00" height="15.00" />
<text class="legend" x="540.00" y="345.00">Hilton2017</text>
</svg>