function setReadableCode()
{
var circLabel = document.getElementById('circLabel');
var circTicket = document.getElementById('circTicket');
var circVecto = document.getElementById('circVecto');
var interLabelTicket = document.getElementById('interLabelTicket');
var interTicketVecto = document.getElementById('interTicketVecto');
var interVectoLabel = document.getElementById('interVectoLabel');
var interLabelTicketVecto = document.getElementById('interLabelTicketVecto');
}
function clickCircle(sCircle, sInter2a, sInter2b, sInter3)
{
var circ = document.getElementById(sCircle);
var inter2a = document.getElementById(sInter2a);
var inter2b = document.getElementById(sInter2b);
var inter3 = document.getElementById(sInter3);
var sColor = '';
if (circ.style.fill == '' || circ.style.fill == 'white')
{
sColor = 'yellow';
}
else
{
sColor = 'white';
}
circ.style.fill = sColor;
inter2a.style.fill = sColor;
inter2b.style.fill = sColor;
inter3.style.fill = sColor;
setReadableCode();
}
function clickCircLabel() {
clickCircle('circLabel', 'interLabelTicket', 'interVectoLabel', 'interLabelTicketVecto');
}
function clickCircTicket() {
clickCircle('circTicket', 'interLabelTicket', 'interTicketVecto', 'interLabelTicketVecto');
}
function clickCircVecto() {
clickCircle('circVecto', 'interVectoLabel', 'interTicketVecto', 'interLabelTicketVecto');
}
function clickIntersection2(sInter2, sInter3) {
var inter2 = document.getElementById(sInter2);
var inter3 = document.getElementById(sInter3);
var sColor = '';
if (inter2.style.fill == '' || inter2.style.fill == 'white') {
sColor = 'yellow';
}
else {
sColor = 'white';
}
inter2.style.fill = sColor;
inter3.style.fill = sColor;
setReadableCode();
}
function clickInterLabelTicket() {
clickIntersection2('interLabelTicket', 'interLabelTicketVecto');
}
function clickInterTicketVecto() {
clickIntersection2('interTicketVecto', 'interLabelTicketVecto');
}
function clickInterVectoLabel() {
clickIntersection2('interVectoLabel', 'interLabelTicketVecto');
}
function clickInterLabelTicketVecto() {
var inter = document.getElementById('interLabelTicketVecto');
var sColor = '';
if (inter.style.fill == '' || inter.style.fill == 'white') {
sColor = 'yellow';
}
else {
sColor = 'white';
}
inter.style.fill = sColor;
setReadableCode();
}
text
{
font-family:Arial;
}
<svg height="350" width="350">
<circle id="circLabel" cx="110" cy="110" r="100" stroke="red" stroke-width="0" fill="white" onclick="clickCircLabel();"/>
<text x="60" y="110" text-anchor="middle" stroke="red" stroke-width="1px" onclick="clickCircLabel();">Label</text>
<circle id="circTicket" cx="210" cy="110" r="100" stroke="blue" stroke-width="0" fill="yellow" onclick="clickCircTicket();"/>
<text x="260" y="110" text-anchor="middle" stroke="blue" stroke-width="1px" onclick="clickCircTicket();">Ticket</text>
<circle id="circVecto" cx="160" cy="196.602541" r="100" stroke="green" stroke-width="0" fill="white" onclick="clickCircVecto();" />
<text x="160" y="240" text-anchor="middle" stroke="green" stroke-width="1px" onclick="clickCircVecto();">Vecto</text>
<path id="interLabelTicket"
d="M 160 23.397460 a100,100 0 0,0 0,173.205081 a100,100 0 0,0 0,-173.205081 z"
fill="white"
stroke-width="3"
onclick="clickInterLabelTicket();"
/>
<path id="interVectoLabel"
d="M 60 196.602541 a100,100 0 0,0 150,-86.602540 a100,100 0 0,0 -150,86.602540 z"
fill="white"
stroke-width="3"
onclick="clickInterVectoLabel();"
/>
<path id="interTicketVecto"
d="M 260 196.602541 a100,100 0 0,0 -150,-86.602540 a100,100 0 0,0 150,86.602540 z"
fill="white"
stroke-width="3"
onclick="clickInterTicketVecto();"
/>
<path id="interLabelTicketVecto"
d="M 110 110 a100,100 0 0,1 100,0 a100,100 0 0,1 -50,86.602540 a100,100 0 0,1 -50,-86.602540 z"
fill="none"
stroke-width="3"
onclick="clickInterLabelTicketVecto();"
/>
<circle cx="110" cy="110" r="100" stroke="red" stroke-width="3" fill="none" />
<circle cx="210" cy="110" r="100" stroke="blue" stroke-width="3" fill="none" />
<circle cx="160" cy="196.602541" r="100" stroke="green" stroke-width="3" fill="none"/>
</svg>