<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
</style>
</head>
<body>
<div id="container">
<div id="menu">
<input type="color" onchange="chgColor(this.value)" value="#FFFFFF" />
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 131.21 100" width="524.84px" height="400px">
<g id="region-GA" fill="#547">
<path id="GA-0" d="M 10.45 87.96 9.81 86.18 8.99 84.25 9.35 81.77 9.67 79.1 8.97 76.24 9.69 71.4 11.82 68.72 10.69 65.99 8.84 61.2 5.8 45.86 2.44 26.44 12.39 26.58 19.28 26.42 35.35 26.55 33.93 27.86 31.86 30.84 35.35 33.44 37.59 34.4 39.99 39.34 41.53 42.11 46.03 45.79 46.91 47.72 49.98 50.25 51.48 53.93 55.61 57.03 56.53 60.55 57.29 62.25 56.85 63.37 59.25 65.05 60.52 67.92 60.5 70.82 61.69 71.39 63.9 72.17 57.81 81.17 55.82 91.88 53.1 91.6 50.54 90.5 48.99 91.01 48.95 96.22 47.28 97.56 46.33 94.94 25.39 92.7 12.41 92.01 10.45 87.96" class="interior"></path>
</g>
<g id="region-SC" fill="#388">
<path id="SC-0" d="M 63.9 72.17 61.69 71.39 60.5 70.82 60.52 67.92 59.25 65.05 56.85 63.37 57.29 62.25 56.53 60.55 55.61 57.03 51.48 53.93 49.98 50.25 46.91 47.72 46.03 45.79 41.53 42.11 39.99 39.34 37.59 34.4 35.35 33.44 31.86 30.84 33.93 27.86 35.35 26.55 36.64 26.08 43.61 23.38 55.52 23.51 61.56 24.24 61.66 25.63 62.96 24.59 64.98 27.26 64.95 29.09 79.29 29.25 93.73 44.04 87.19 49.74 85.35 54.93 71.18 64.9 63.9 72.17" class="interior"></path>
</g>
<g id="region-NC" fill="#720">
<path id="NC-0" d="M 35.35 26.55 19.28 26.42 19.57 23.08 22.3 22.09 23.2 20.39 25.03 18.47 27.64 18.05 30.68 17.32 33.63 15.95 34.9 14.54 37.36 13.27 37.3 12.12 40.54 9.96 41.59 11.36 46.35 8.35 48.58 8.67 50.57 5.98 53.2 5.29 53.06 3.0 53.38 0.98 48.34 1.22 53.38 0.98 75.16 1.68 100.89 1.75 114.56 1.62 126.79 1.54 128.41 1.53 130.23 17.51 122.02 29.23 108.66 33.89 100.18 43.04 93.73 44.04 79.29 29.25 64.95 29.09 64.98 27.26 62.96 24.59 61.66 25.63 61.56 24.24 55.52 23.51 43.61 23.38 36.64 26.08 35.35 26.55" class="interior"></path>
</g>
</svg>
</div>
<script src="script.js"></script>
</body>
</html>
var activeRegion = false;
var svg = document.querySelector('svg');
var allGroups = svg.querySelectorAll('g');
allGroups.forEach((el) => {
el.addEventListener('click',regionClick);
});
function regionClick(evt){
var id = evt.currentTarget.id;
if (id == activeRegion){
activeRegion = false;
}
else {
activeRegion = id;
}
allGroups.forEach((el) => {
el.classList.remove('selected');
});
if (activeRegion){
var el = svg.querySelector("#"+activeRegion);
el.classList.add('selected');
}
}
function chgColor(color){
if (!activeRegion){return}
var el = document.getElementById(activeRegion);
el.setAttribute('fill',color);
}
.interior {
stroke-width: 0.5;
stroke: gray;
}
.selected path {
stroke-width: 2;
stroke: red;
}
About
This repl includes a few JavaScript functions that allow you to move shapes from an SVG element.
To view this on TripleLog, click here.
HTML
The index.html is generated from other repls and includes SVG elements for the states of Georgia, South Carolina, and North Carolina.
JavaScript
The script.js allows you to select one of the states and then change its fill color. If you want to download the SVG or whatever (or really do anything interesting) then you will need to add more functionality.
TripleLog