<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<line x1="80%" y1="50%" x2="95%" y2="50%"></line>
<circle cx="95%" cy="50%" r="0.75em"></circle>
<text x="95%" y="50%">7</text>
</g>
<g>
<line x1="65%" y1="50%" x2="80%" y2="50%"></line>
<circle cx="80%" cy="50%" r="0.75em"></circle>
<text x="80%" y="50%">6</text>
</g>
<g>
<line x1="50%" y1="50%" x2="65%" y2="50%"></line>
<circle cx="65%" cy="50%" r="0.75em"></circle>
<text x="65%" y="50%">5</text>
</g>
<g>
<line x1="35%" y1="50%" x2="50%" y2="50%"></line>
<circle cx="50%" cy="50%" r="0.75em"></circle>
<text x="50%" y="50%">4</text>
</g>
<g class="active">
<line x1="20%" y1="50%" x2="35%" y2="50%"></line>
<circle cx="35%" cy="50%" r="0.75em"></circle>
<text x="35%" y="50%">3</text>
</g>
<g>
<line x1="5%" y1="50%" x2="20%" y2="50%"></line>
<circle cx="20%" cy="50%" r="0.75em"></circle>
<text x="20%" y="50%">2</text>
</g>
<g>
<circle cx="5%" cy="50%" r="0.75em"></circle>
<text x="5%" y="50%">1</text>
</g>
</svg>
</body>
</html>
$(function() {
$('svg g circle, svg g text').on('click', function() {
$('svg g.active').removeClass('active');
$(this).parent('svg g').addClass('active');
});
});
svg {
width: 100%;
/*This goes here because SVG uses em as units*/
font: normal 9pt sans-serif;
}
svg g line {
stroke: #80C0FF;
stroke-width: 2px;
}
svg g.active line,
svg g.active ~ g line {
stroke: #0080FF;
}
svg g circle {
fill: #80C0FF;
}
svg g.active circle,
svg g.active ~ g circle {
fill: #0080FF;
}
svg g text {
fill: #0080FF;
text-anchor: middle;
dominant-baseline: central;
}
svg g.active text,
svg g.active ~ g text {
fill: #FFF;
}
/* Make the active group bigger*/
svg g.active {
font-size: 1.5em;
}
/* Use 'pointer' cursor*/
svg g circle,
svg g text {
cursor: pointer;
}