将具有3条路径的SVG添加到按钮的.innerHTML部分 [英] Adding an SVG that has 3 paths to the .innerHTML part of a button

问题描述

我试图添加一个带有3个路径的 SVG 按钮代码。

我需要帮助添加 SVG

code>到 .innerHTML 部分代码。

所有帮助将不胜感激。 / p>

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

Play：

 < svg width =100height =100version =1.1viewBox = -  1 0 67 66> 
 <路径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.5zfill =orange>< / 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.9zfill =blue>< / path>< / svg> 
  

暂停：

 < svg width =100height =100version =1.1viewBox = -  1 0 67 66> 
 <路径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.5zfill =red>< / 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.1 V22.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,21zfill =blue>< / path> 
< / svg> 
  

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

按钮代码：

 < button id =playButton2style =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 \\''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 =100height =100version =1.1viewBox = -  1 0 67 66> 
 <路径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.5zfill =orange>< / 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.9zfill =blue>< / path> 
< / svg> 
 
< / button> 
 
< audio id =player2style =display：none;> 
< source src =''type ='audio / mpeg'>< / source> 
< / audio> 
  

解决方案

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

为什么？因为在 onClick 属性的内有内联JavaScript，所以它内部的JS使用<$ c $现在如果你打算使用，例如双引号来包含属性的值，那么解析器会认为双引号是 onClick 属性的结尾。

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

  playButton2.innerHTML ='< svg width = \\'100''height = \\'100''version = \ '1.1 \'viewBox = \'-1 0 67 66 \'> <路径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><路径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>   

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

I am trying to add an SVG that has 3 paths to a button code. I know how to do One Path, but doing multiple, I am confused on how to do that.

I need help adding the SVG to the .innerHTML part of the code.

All help would be greatly appreciated.

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

Play:

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

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

Below is the code format I'm using.

Button Code:

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

解决方案

Use ' ' quotes to contain the values of your SVG code that you are putting inside the button using the inline JavaScript.

Why? Because you have your inline JavaScript inside " " of the onClick attribute, so the JS inside it uses ' ' for the variables, now if you are going to use " i.e double quotes to contain the values of attributes the parser will think that that double quote is the end of the onClick attribute.

Here's an example of what you need to have:

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

Each of the single quotes has a \ before it to escape the character and tell the parser that it isn't the end of the quotes surrounding the variable's value.

这篇关于将具有3条路径的SVG添加到按钮的.innerHTML部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！