[Dilettante_Pro]

<style>
.ring { fill:red; }
.square { fill:green;}
#modal { position:absolute; display:none; }

</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
  var elems = document.querySelectorAll(".ring, .square"),
  curClass = "";

  [].forEach.call(elems, function(el) {
     el.addEventListener("click", function () {
            curClass = el.classList[0];
            modal.style.display = "block"; 
     });
  });
  modal.onchange = function() {
           var col = this.value;
           [].forEach.call(elems, function(it) {
               if(it.classList[0] == curClass) it.style.fill = col;
           });
           modal.style.display = "none";      
  }
});
</script>
<input id="modal" type="color">

<svg width="700px" height="200px"> 
   <circle class = "ring" cx="50px" cy="50px" r="25px"   />
   <circle class = "ring" cx="150px" cy="70px" r="25px"  />
   <rect class = "square" x="70px" y="100px" width="50px" height="50px"  />
   <rect class = "square" x="170px" y="30px" width="50px" height="50px"  />
</svg>