Question

在SVG中间移动播放按钮的最佳方法是什么？有没有人可以帮我这样做？

下面提供了所有代码。它告诉我要添加更多细节，但这就是它。我把所有代码放在下面。

    <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

将两个 - 你的svg和你的按钮放在一个包装div中。
将位置relative提供给此包装div。
使用包装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>

<强>更新如果您在评论中提到由于某种原因无法使用外部样式表，则可以使用相同的内联样式。

更改以下行：

<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>

在SVG中间移动按钮？

1 个答案: