Moving a button in the middle of an SVG? - html

Question

What would be the best way to move a playbutton in the middle of an SVG?
Is there anyone who can help me do this?
All the code is provided below. It's telling me to add more details, but that's about it. I put all the code below.
https://jsfiddle.net/cy8v6657/1/
<svg width="238" height="238" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
<button id="playButton2" style="width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick="
var player = document.getElementById('player');
player.volume=1.0;
var button = document.getElementById('playButton2');
if (player.paused) {
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
player.play();
} else {
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
player.pause();
}">
</button>
<audio id="player" preload="none" style="display:none;">
<source src='' type='audio/mpeg'/>
</audio>

Answer 1

Place both - your svg and your button, inside a wrapper div.
Give position relative to this wrapper div.
Center the button using absolute positioning inside the wrapper div.
#svg-wrapper{
position: relative;
width: 238px;
height: 238px;
}
#svg-wrapper #playButton2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="svg-wrapper">
<svg width="238" height="238" viewBox="0 0 238 238">
<rect x="0" y="0" width="238" height="238" fill="blue" />
<rect x="7" y="7" width="224" height="224" fill="black" />
<rect x="14" y="14" width="210" height="210" fill="red" />
<rect x="21" y="21" width="196" height="196" fill="black" />
<rect x="28" y="28" width="182" height="182" fill="yellow" />
<rect x="35" y="35" width="168" height="168" fill="black" />
<rect x="42" y="42" width="154" height="154" fill="orange" />
<rect x="49" y="49" width="140" height="140" fill="black" />
<rect x="56" y="56" width="126" height="126" fill="lime" />
<rect x="63" y="63" width="112" height="112" fill="black" />
<rect x="70" y="70" width="98" height="98" fill="teal" />
<rect x="77" y="77" width="84" height="84" fill="black" />
<rect x="84" y="84" width="70" height="70" fill="silver" />
<rect x="91" y="91" width="56" height="56" fill="black" />
<rect x="98" y="98" width="42" height="42" fill="#1155cc" />
<rect x="105" y="105" width="28" height="28" fill="black" />
<rect x="112" y="112" width="14" height="14" fill="gold" />
</svg>
<button id="playButton2" style="width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick="
var player = document.getElementById('player');
player.volume=1.0;
var button = document.getElementById('playButton2');
if (player.paused) {
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
player.play();
} else {
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
player.pause();
}">
</button>
</div><!--#svg-wrapper-->
<audio id="player" preload="none" style="display:none;">
<source src='' type='audio/mpeg'/>
</audio>
Update
If you cannot use external stylesheet for some reason as you mentioned in comments, you can use the same styles inline.
Change following lines:
<div id="svg-wrapper" style="position: relative;width: 238px;height: 238px;">
<button id="playButton2" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick="
var player = document.getElementById('player');
player.volume=1.0;
var button = document.getElementById('playButton2');
if (player.paused) {
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
player.play();
} else {
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
player.pause();
}">
</button>