1

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>
Mohit Bhardwaj
  • 9,650
  • 3
  • 37
  • 64
svgcoding
  • 77
  • 7

1 Answers1

4
  1. Place both - your svg and your button, inside a wrapper div.
  2. Give position relative to this wrapper div.
  3. 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>
Mohit Bhardwaj
  • 9,650
  • 3
  • 37
  • 64