HTML
<body>
<svg version="1.1" id="ex1-3rds-quarter-s" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="323.333px" height="55.333px" viewBox="0 0 323.333 55.333" enable-background="new 0 0 323.333 55.333"
xml:space="preserve">
<path id="trebleclef" d="M18.343,26.511c0.08,0,0.179-0.02,0.259-0.02c3.088,0,5.101,2.55,5.101,5.2
c0,1.514-0.658,3.068-2.132,4.184c-0.438,0.339-0.936,0.558-1.455,0.717c0.06,0.697,0.1,1.395,0.1,2.092
c0,0.379-0.02,0.777-0.04,1.156c-0.139,2.391-1.793,4.543-4.144,4.543c-2.152,0-3.885-1.753-3.885-3.925
c0-1.156,1.056-2.052,2.232-2.052c1.076,0,1.893,0.936,1.893,2.052c0,1.036-0.857,1.893-1.893,1.893c-0.219,0-0.418-0.04-0.618-0.12
c0.518,0.777,1.355,1.295,2.331,1.295c1.913,0,3.128-1.833,3.248-3.806c0.02-0.359,0.04-0.737,0.04-1.096
c0-0.618-0.02-1.215-0.08-1.833c-0.578,0.1-1.156,0.159-1.773,0.159c-3.746,0-6.635-3.427-6.635-7.452
c0-3.527,2.61-6.097,4.941-8.787c-0.379-1.235-0.737-2.491-0.897-3.786c-0.12-1.036-0.139-2.072-0.139-3.108
c0-2.291,1.096-4.463,2.969-5.818c0.06-0.04,0.139-0.06,0.199-0.06c0.08,0,0.139,0,0.199,0.06c1.415,1.674,2.65,4.882,2.65,7.133
c0,2.849-1.714,5.081-3.587,7.253C17.646,23.742,18.004,25.136,18.343,26.511z M20.037,35.777c1.355-0.478,2.252-1.893,2.252-3.268
c0-1.793-1.315-3.567-3.447-3.786C19.32,31.034,19.758,33.326,20.037,35.777z M12.326,31.174c0,2.69,2.57,4.922,5.26,4.922
c0.558,0,1.096-0.04,1.634-0.12c-0.279-2.531-0.737-4.882-1.255-7.253c-1.574,0.159-2.471,1.215-2.471,2.371
c0,0.877,0.498,1.813,1.614,2.451c0.1,0.1,0.139,0.199,0.139,0.299c0,0.219-0.199,0.438-0.438,0.438c-0.06,0-0.12-0.02-0.179-0.04
c-1.594-0.857-2.331-2.291-2.331-3.686c0-1.753,1.156-3.467,3.188-3.925c-0.279-1.156-0.578-2.331-0.917-3.487
C14.438,25.555,12.326,27.986,12.326,31.174z M18.981,10.91c-1.973,0.956-3.228,2.969-3.228,5.161c0,1.474,0.359,2.65,0.717,3.866
c1.594-1.933,2.909-3.945,2.909-6.456C19.379,12.384,19.3,11.906,18.981,10.91z"/>
<g id="flats" class="flat">
<path id="flat1"...
JavaScript
function changekey(svgid,direction){
var currentkey = document.getElementById("majorkey").innerHTML;
var Curkeyval = parseInt(document.getElementById("majorkey").title);
var majorkeys = {C:0,Db:23.035,D:16.806,Eb:13.821,E:22.408,F:4.607,Gb:27.642,G:5.602,Ab:18.482,A:16.806,Bb:9.214,B:28.01};
var sharpsflats = {C:0,G:1,D:2,A:3,E:4,B:5,F:1,Bb:2,Eb:3,Ab:4,Db:5,Gb:6};
var sharpflatkey = {G:"sharp",D:"sharp",A:"sharp",E:"sharp",B:"sharp",F:"flat",Bb:"flat",Eb:"flat",Ab:"flat",Db:"flat",Gb:"flat"};
var keyArray = ["C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B"];
var vshift = document.getElementById("majorkey").dataset.shift;
if (direction == "down"){
document.getElementById("majorkey").title=Curkeyval-1;
Curkeyval--;
if(keyArray.indexOf(currentkey)==0){
if (currentkey.charAt(0)!=keyArray[keyArray.length-1].charAt(0)){
vshift--;
}
currentkey = keyArray[keyArray.length-1];
}else{
if (currentkey.charAt(0)!=keyArray[keyArray.indexOf(currentkey)-1].charAt(0)){
vshift--;
}
currentkey = keyArray[keyArray.indexOf(currentkey)-1];
}
document.getElementById("allnotes").setAttribute('transform','translate(0,' + (vshift)*-2.491 +')');
}
if (direction == "up"){
document.getElementById("majorkey").title=Curkeyval+1;
Curkeyval++;
if(keyArray.indexOf(currentkey)==keyArray.length-1){
if (currentkey.charAt(0)!=keyArray[0].charAt(0)){
vshift++;
}
currentkey = keyArray[0];
}else{
if (currentkey.charAt(0)!=keyArray[keyArray.indexOf(currentkey)+1].charAt(0)){
vshift++;
}
currentkey = keyArray[keyArray.indexOf(currentkey)+1];
}
...