Question

我一直试图弄清楚如何放置SVG播放按钮而不是png，但我似乎无法弄明白。这基本上就是我试图在这里做的一切。我一直在尝试不同的事情但没有任何工作。

非常感谢所有帮助。

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

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

   <style>
    html, body {
      height: 100%;
      background: #000;
      color: #fff;
      padding: 0;
      margin: 0;
    }

    .outer {
      display: table;
      height: 100%;
      margin: 0 auto;
      width: 100%;
    }

    .tcell {
      display: table-cell;
      vertical-align: middle;
    }

    .wrap {
      max-width: 400px;
      position: relative;
      margin: auto;
      border: 0px solid #5CB378;
    }

    .inner {
      position: relative;
      height: 0;
      padding-bottom: 100%;
      cursor: pointer;
      background-color: black;
    }

    #thevideo, .image {
      position: absolute;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      height: 100%;
      width: 100%;
      background-color: #000000;
      cursor: pointer;
      overflow: hidden;
    }

    #thevideo iframe {
      width: 100%;
      height: 100%;
      border: 0px;
    }

    .image {
      background: url('http://via.placeholder.com/400x400');
      background-size: cover;
      border-radius: 50px;
    }

    .image:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-image: url(https://i.imgur.com/WSlJUPf.png);
      background-repeat: no-repeat;
      background-size: 24.5% Auto;
      background-position: 50% 50%;
    }

 <div class='outer'>
      <div class='tcell'>
        <div class='wrap'>
          <div class='inner'>
            <div class='image' onclick="thevid=document.getElementById('thevideo');
    thevid.style.display='block'; this.style.display='none';
    document.getElementById('iframe').src =
    document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> </div>

            <div id='thevideo' style='display: none;'>

              <iframe frameborder='0'id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe></div>
          </div>
        </div>
      </div>
    </div>

Answer 1

你走在正确的道路上：

从css中删除背景图片代码。然后将svg放入具有图像类的div中。然后给svg提供图像类。

请参考我分叉的这个JSFiddle：https://jsfiddle.net/0xehdwe7/

    <div class='outer'>
  <div class='tcell'>
    <div class='wrap'>
      <div class='inner'>
        <div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
          <svg class="image" 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>
        </div>

        <div id='thevideo' style='display: none;'>

          <iframe frameborder='0' id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe>
        </div>
      </div>
    </div>
  </div>
</div>

在iframe前放置SVG而不是PNG

1 个答案: