Why is this svg placed in 2 different spots?

Middle:
http://htmledit.squarefree.com/

https://i.imgur.com/ed047s8.png
https://www.w3schools.com/code/tryit.asp?filename=FK7ESYP8ATPK

Top:
Codepen/jsfiddle
https://i.imgur.com/PPn38SZ.png
https://jsfiddle.net/3hxknqLg/

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 198px,#0059dd 198px, #0059dd 201px, #000000 201px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
  onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player'); player.volume=1.0;
  if (player.paused) {
    playButton.innerHTML = '&lt;svg width=\'25\' height=\'40\' style=\'background-color:#000000;color:#0059dd;\' viewBox=\'16 0 25 100\'&gt;&lt;path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'&gt;&lt;/svg&gt;';
player.play();
    playButton.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, #000000 201px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
    player.play();
  } else {
    playButton.innerHTML = '&lt;svg width=\'34\' height=\'40\' style=\'background-color:#000000 ;color:#0059dd;\' viewBox=\'26 -3 34 106\'&gt;&lt;path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'&gt;&lt;/svg&gt;';
    playButton.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, #000000 21px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
    player.pause();
  }">
<svg style="background-color:#000000;" width="34" height="40" viewBox="26 -3 34 106">
  <path fill="currentColor" style="fill:#0059dd " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
</svg>
</button>


<audio id="player" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>

Doing it like this works perfectly. If there’s anything I should adjust let me know.

<button id="playButton" style="display:block;width: 606px;height:50px;border-radius:50px;background-image: linear-gradient( to right,#000000 198px,#0059dd 198px, #0059dd 201px, #000000 201px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px );border: 3px solid #0059dd; cursor: pointer;font-family: Tahoma; font-weight: bold;font-size:23px; color:#000000;"
onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player'); player.volume=1.0;
  if (player.paused) {
    playButton.innerHTML = '&lt;svg width=\'auto\' height=\'100%\' style=\'background-color:000000;color:#0059dd;transform: scale(.9);\' viewBox=\'0 0 60 100\'&gt;&lt;path fill=\'currentColor\' d=\'M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z\'&gt;&lt;/svg&gt;';
player.play();
    playButton.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, #000000 201px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
    player.play();
  } else {
    playButton.innerHTML = '&lt;svg width=\'auto\' height=\'100%\' style=\'background-color:000000;color:#0059dd;transform: scale(.9);\' viewBox=\'0 0 85 100\'&gt;&lt;path fill=\'currentColor\' d=\'M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z\'&gt;&lt;/svg&gt;';
    playButton.style.background = 'linear-gradient( to right, #000000 198px,#0059dd 198px, #0059dd 201px, #000000 21px, #000000 399px, #0059dd 399px, #0059dd 402px, #000000 402px )';
    player.pause();
  }">
 <svg width="auto" height="100%" style="background-color:#000000;transform: scale(.9);" viewBox="0 0 85 100">
    <path fill="currentColor" style="fill:#0059dd;" d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>
</button>

<audio id="player" style="display:none;">
  <source src='' type='audio/mpeg' />
</source></audio>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.