添加一个具有 3 条路径的 SVG 到按钮的 .innerHTML 部分答案

【问题标题】：Adding an SVG that has 3 paths to the .innerHTML part of a button添加一个具有 3 条路径的 SVG 到按钮的 .innerHTML 部分
【发布时间】：2017-10-08 17:45:38
【问题描述】：

我正在尝试添加一个SVG，它有 3 条路径到按钮代码。我知道如何做一个路径，但是做多个路径，我对如何做到这一点感到困惑。

我需要帮助将SVG 添加到代码的.innerHTML 部分。

所有帮助将不胜感激。

https://jsfiddle.net/hnhqtb4u/2/

播放：

<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg>

暂停：

<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="red"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z" fill="blue"></path>
</svg>

下面是我使用的代码格式。

按钮代码：

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '&lt;svg width=\'65\' height=\'109\' style=\'stroke: #0059dd; stroke-width:3px;\' viewBox=\'-1 0 62 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();
} else {
playButton2.innerHTML = '&lt;svg width=\'92\' height=\'109\' style=\'stroke: #0059dd; stroke-width:3px;\' viewBox=\'0 -3 85 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;';
player.pause();
}">
<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
</svg>

</button>

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

【问题讨论】：

您是否考虑过将它们放入代码中，然后使用style="display:none" 隐藏您不想显示的那个？
是的...？所以只需将一个设置为display:none，将另一个设置为display:block，反之亦然。

标签： javascript html svg

【解决方案1】：

使用 ' ' 引号包含您使用内联 JavaScript 放入按钮内的 SVG 代码的值。

为什么？因为你在onClick 属性的" " 中有内联JavaScript，所以它里面的JS 使用' ' 作为变量，现在如果你要使用" 即双引号来包含属性的值解析器会认为双引号是onClick 属性的结尾。

以下是您需要具备的示例：

playButton2.innerHTML = '<svg width=\'100\' height=\'100\' version=\'1.1\' viewBox=\'-1 0 67 66\'><path d=\'M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z \' fill=\'orange\'></path><path d=\'M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z\' fill=\'black\'></path><path d=\'M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z\' fill=\'blue\'></path></svg>';

每个单引号前面都有一个\ 来转义字符并告诉解析器它不是围绕变量值的引号的结尾。

【讨论】：

【解决方案2】：

在第一个代码中，我们在 js 中有 SVG 的 HTML https://jsfiddle.net/rvyv49oy/1/

 <button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;"
  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' version=\'1.1\' viewBox=\'-1 0 67 66\'><path d=\'M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z \' fill=\'red\'></path><path d=\'M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z\' fill=\'black\'></path><path d=\'M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z\' fill=\'blue\'></path></svg> ';
player.play();
} else {
playButton2.innerHTML = '<svg width=\'100\' height=\'100\' version=\'1.1\' viewBox=\'-1 0 67 66\'><path d=\'M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z \' fill=\'orange\'></path><path d=\'M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z\' fill=\'black\'></path><path d=\'M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z\' fill=\'blue\'></path></svg>';
player.pause();
}">
<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
</svg>

</button>

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

使用 display 属性，在 HTML 按钮中有，只是隐藏 https://jsfiddle.net/kLr5tLLe/1/

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer; background-color: black; border: 3px solid #0059dd;" onclick=" 
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">


  <svg style="display: none;" class="pause" width="100" height="100" version="1.1" viewBox="-1 0 67 66">
    <path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="red"></path>
    <path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
    <path d="M27.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C29,21.5,28.5,21,27.9,21zM40.9,21h-3.7c-0.6,0-1.1,0.5-1.1,1.1v22.8c0,0.6,0.5,1.1,1.1,1.1h3.7c0.6,0,1.1-0.5,1.1-1.1V22.1 C42,21.5,41.5,21,40.9,21z"
    fill="blue"></path>
  </svg>


  <svg style="display: none;" class="play" width="100" height="100" version="1.1" viewBox="-1 0 67 66">
    <path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
    <path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
    <path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
  </svg>

  <svg class="initial" width="100" height="100" version="1.1" viewBox="-1 0 67 66">
    <path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
    <path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
    <path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
  </svg>

</button>

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

【讨论】：