主頁 > 移動端開發 > 防止在藍圈外點擊svg

防止在藍圈外點擊svg

2021-10-17 17:34:04 移動端開發

現在你可以在藍圈外點擊，

如何防止這種情況？

我怎樣才能防止這種情況？

這樣，它就只能在點擊svg本身時打開？

意思是說，白色空間和svg內的所有東西？

這就是我所要做的。

防止點擊藍色SVG圓圈以外的地方。

我怎樣才能在代碼中做到這一點？

它是如何作業的？

它是如何作業的，在點擊藍色的svg后，它們會被打開。

https://jsfiddle.net/s5bzampu/

。 
const manageCover = (function makeManageCover（） {
  const config = {};

  function show（el） {
    el.classList.remove("hide"/span>)。
  }

  function hide（el） {
    el.classList.add("hide"/span>)。
  }

  function hideAll（elements） {
    elements.forEach(hide)。
  }

  function showCovers（playButton） {
    const cover = playButton.parentElement;
    cover.classList.add("active") 。
    show(cover)。
  }

  function coverClickHandler（evt） {
    hideAll(config.containers) 。
    const cover = evt.currentTarget;
    showCovers（cover）。
     document.querySelector(' 。 outer'）.classList.add（'isOpen'）。
  }

  function addClickToButtons（playButtons） {
    playButtons.forEach(function addEventHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler) 。
    });
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector（coverSelector）。
    cover.addEventListener("click", handler) 。
  }

  function init（selectors）{
    config.containers = document.querySelectorAll（selectors.container）。
    const playButtons = document.querySelectorAll（selectors.playButton）。
    addClickToButtons（playButtons）。
  }

  return {
    addCoverHandler,
    init,
    顯示
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  const players = [] 。

  const tag = document.createElement（"script"）。
  tag.src = "https://www.youtube.com/player_api"。
  const firstScriptTag = document.getElementsByTagName("script") [0] 。
  firstScriptTag.parentNode.insertBefore（tag, firstScriptTag）。


  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume（100）。
  }

  function addPlayer(video, settings, videoIds = video.dataset.id) {
    const videoId = !Array.isArray(videoIds) & & videoIds;
    const playlist = Array.isArray(videoIds) & & videoIds;
    const config = {
      host: "https://www.youtube-nocookie.com",
      videoId
    };
    config.playerVars = {
      playlist: playlist || undefinedevents = {
      "onReady"/span>: onPlayerReady
    };
    const defaultOptions = config;
    const playerOptions = Object.assign（{}, defaultOptions, settings）。
    players.push(new YT.Player（視頻，playerOptions））。
  }

  return {
    addPlayer
  };
}());


const managePlayer = (function makeManagePlayer() {
  const config = {
    height: 600,
    width: 360playerVars = {
    autoplay: 0,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3,
    rel: 0function show（el） {
    el.classList.remove("hide") 。
  }

  function createPlayerOptions（settings） {
    function paramInOptions(opts, param) {
      if (settings[param] !== undefined) {
        opts[param] = settings[param];
        delete settings[param]。
      }
      return opts;
    }

    const optionParams = ["width", "height", "playlist", "host", "videoid"】。]
    const defaultOptions = config;
    const preferred = optionParams.reduce（paramInOptions, {}）。
    const playerOptions = Object.assign（{}, defaultOptions, preferred）。
    //設定現在應該只包括playerVars。
    const defaultVars = config.playerVars;
    const playerVars = settings.playerVars;
    config.playerVars = Object.assign（{}, defaultVars, playerVars）。
    return playerOptions;
  }

  function createPlayer(videoWrapper, settings = {}, videoIds = "" ) {
    const video = videoWrapper.querySelector(".video") 。
    if (!videoIds) {
      videoIds = video.dataset.id。
    }
    const playerOptions = createPlayerOptions（設定）。
    return videoPlayer.addPlayer（視頻，playerOptions，videoIds）。
  }

  function createCoverClickHandler(playerSettings, videoIds) {
    return function coverClickHandler（evt）{
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show（wrapper）。
      const player = createPlayer（wrapper, playerSettings, videoIds）。
      wrapper.player = player。
    };
  }

  function addPlayer(coverSelector, playerSettings, videoIds) {
    const clickHandler = createCoverClickHandler（playerSettings, videoIds）。
    manageCover.addCoverHandler(coverSelector, clickHandler)。
  }


  function addPlayerRandomVideo（coverSelector, playerSettings, videoIds） {
    const index = Math.floor（Math. random() * videoIds.length) 。
    const videoId = videoIds[index];
    const clickHandler = createCoverClickHandler（playerSettings, videoId）。
    manageCover.addCoverHandler(coverSelector, clickHandler)。
  }


  function init（playerOptions） {
    Object.assign（config, playerOptions）。
  }

  return {
    add: addPlayer,
    addRandom: addPlayerRandomVideo,
    激活
  };
}());


function onYouTubeIframeAPIReady(/span>) {
  managePlayer.init（{
    playerVars: {
      autoplay: 0.
    }
  });
  managePlayer.addRandom(" .playa", {
    height: 207,
    start: 45,
    width: 277"0dgNc5S8cLI"/span>,
    "mnfmQe8Mv1g",
    "-Xgi_way56U",
    "CHahce95B1g".
  ]);
  managePlayer.add(".playb"/span>, {
    height: 207,
    width: 277addRandom(".playc"/span>, {
    height: 207,
    width: 277.
  }, [
    "0dgNc5S8cLI"/span>,
    "-Xgi_way56U"。
    "CHahce95B1g".
  ]);
  managePlayer.add(".playd"/span>, {
    height: 207,
    width: 277add(".playe"/span>, {
    height: 207,
    width: 277add(".playf"/span>, {
    height: 207,
    width: 277add(".playg"/span>, {
    height: 207,
    width: 277add(".playh"/span>, {
    height: 207,
    width: 277add(".playi"/span>, {
    height: 207,
    width: 277init（{
    container: ".container",
    playButton: ".thePlay"。
  });
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: white;
  animation: fade 2s ease 0s forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 310px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  差距。20px;
  /*list-style:none;*/
  padding: 0;
}


.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}


.container {
  display: flex;
  justify-content: center;
}

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forward;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, 茶色5px, #0000 5px), linear-gradient（黑色10px, #0000 10px 160px, black 160px）。) linear-gradient(90deg, black 10px, #0000 10px 160px, 黑色160px), linear-gradient(橙色15px, #0000 15px 155px, orange 155px）。) linear-gradient(90deg, orange 15px, #0000 15px 155px, 橙色155px), linear-gradient(black 20px, #0000 20px 150px, black 150px）。) linear-gradient(90deg, black20px, #0000 20px 150px, 黑色150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px) 。linear-gradient(90deg, teal 25px, #0000 25px 145px, 茶色145px), linear-gradient(black 30px, #0000 30px 140px, black 140px）,) linear-gradient(90deg, black 30px, #0000 30px 140px, 黑色140px), linear-gradient(橙色35px, #0000 35px 135px, orange 135px）。) linear-gradient(90deg, orange 35px, #0000 35px 135px, 橙色135px), linear-gradient(black 40px, #0000 40px 130px, black 130px）。) linear-gradient(90deg, black40px, #0000 40px 130px, 黑色130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px）。) linear-gradient(90deg, teal 45px, #0000 45px 125px, 茶色125px), linear-gradient(black 50px, #0000 50px 120px, black 120px）。) linear-gradient(90deg, black50px, #0000 50px 120px, 黑色120px), linear-gradient(橙色55px, #0000 55px 115px, orange 115px）,) linear-gradient(90deg, orange 55px, #0000 55px 115px, 橙色115px), linear-gradient(black 60px, #0000 60px 110px, black 110px）。) linear-gradient(90deg, black 60px, #0000 60px 110px, 黑色110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px）。) linear-gradient(90deg, teal 65px, #0000 65px 105px, 茶色105px), linear-gradient(black 70px, #0000 70px 100px, black 100px）。) linear-gradient(90deg, black 70px, #0000 70px 100px, 黑色100px), linear-gradient(橙色75px, #0000 75px 95px, orange 95px）,) linear-gradient(90deg, orange 75px, #0000 75px 95px, 橙色95px), linear-gradient(black 80px, #0000 80px 90px, 黑色90px), linear-gradient(90deg, 黑色80px, #0000 80px 90px, 黑色 90px), linear-gradient(teal, teal)。
}

.thePlay{
  /*margin: auto 20px;*/{
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: 指標。
  flex-shrink: 0;
  填充：藍色。

}

/* 當容器處于活動狀態時，隱藏svg */。

.container.active .thePlay{
  display: none;
}

.inner-container {
  display: none;
}



/* 當容器處于活動狀態時，隱藏svg并顯示內部容器*/。

.container.active .thePlay{
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curbtain {
  display: block;
}

@keyframes fadebody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%。
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50%   1px) 。
  /*四舍五入錯誤修復 */
  top: 0%;
  transition: all ease 10s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  背景-位置：中心；*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/ 
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/ 
}

.panel-left::before,
.panel-right::before {
  content: ""。
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url（"https://picsum.photos/id/26/1920/1080"）。
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.curtain2 .panel-left: :before,
.curtain2 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080") 。
}

.curtain3 .panel-left: :before,
.curtain3 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080"/span>)。
}

.panel-right: :before {
  left: -100%;
}

.container.active .curtain .panel-left{
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX（-100%）。
  }
}

.container.active .curtain .panel-right{
  animation: curtain2 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain3 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain4 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain5 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain6 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain7 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain8 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain9 {
  to {
    transform: translateX（100%）。
  }
}


.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  border-radius: 25px;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%。
}

.hide {
  display: none;
}
<ul class="outer" > 
    <li class="container"> 
      < svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <g id="play"> 
          <title>/span>Play</title>
          <path d="M25。 6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
          M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>/span>
      <div class="inner-container curtain1"> 
        <div class="rate-keeper">
          <div class="wrapa"/span>>
            <div class="video video-frame"/span>> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playb thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain2"> 
        <div class="rate-keeper">
          <div class="wrapb"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container with-curtain">/span>
      < svg class="playc thePlay" width="64""64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain3"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            <div class="video video-frame"/span>> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playd thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain4"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playe thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain5"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playf thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain6"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playg thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain7"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playh thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain8"/span>>
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playi thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain9"/span>>
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
  </ul>/span>
<iframe name="sif1" sandbox="allow-form allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

你需要指定SVG的哪些元素接受指標事件。例如在頂層SVG中添加pointer-events="none"，在路徑元素中添加pointer-events="visiblePainted"，或者在你的案例中，由于中間的空白是空的，你可以在svg元素中添加一個circle并對其應用pointer-events="visiblePainted"。 

< svg class="playa thePlay" width="64"  高度="64" viewBox="0 0 64 64" pointer-events="無" > 
  <g id="play"> 
    <title>/span>Play</title>
    < circle cx="32" cy="32" r="32" fill="transparent" pointer-events=" visiblePainted" /> 
    <path d="M25。 6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
    M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
  </g>
</svg>

為了確保pointer-events="none"被傳遞給所有的svg元素，你可以通過css應用它。 

svg.thePlay {
 pointer-events: none;

顯示代碼片段

const manageCover = (function makeManageCover（） {
  const config = {};

  function show（el） {
    el.classList.remove("hide"/span>)。
  }

  function hide（el） {
    el.classList.add("hide"/span>)。
  }

  function hideAll（elements） {
    elements.forEach(hide)。
  }

  function showCovers（playButton） {
    const cover = playButton.parentElement;
    cover.classList.add("active") 。
    show(cover)。
  }

  function coverClickHandler（evt） {
    hideAll(config.containers) 。
    const cover = evt.currentTarget;
    showCovers（cover）。
     document.querySelector(' 。 outer'）.classList.add（'isOpen'）。
  }

  function addClickToButtons（playButtons） {
    playButtons.forEach(function addEventHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler) 。
    });
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector（coverSelector）。
    cover.addEventListener("click", handler) 。
  }

  function init（selectors）{
    config.containers = document.querySelectorAll（selectors.container）。
    const playButtons = document.querySelectorAll（selectors.playButton）。
    addClickToButtons（playButtons）。
  }

  return {
    addCoverHandler,
    init,
    顯示
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  const players = [] 。

  const tag = document.createElement（"script"）。
  tag.src = "https://www.youtube.com/player_api"。
  const firstScriptTag = document.getElementsByTagName("script") [0] 。
  firstScriptTag.parentNode.insertBefore（tag, firstScriptTag）。


  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume（100）。
  }

  function addPlayer(video, settings, videoIds = video.dataset.id) {
    const videoId = !Array.isArray(videoIds) & & videoIds;
    const playlist = Array.isArray(videoIds) & & videoIds;
    const config = {
      host: "https://www.youtube-nocookie.com",
      videoId
    };
    config.playerVars = {
      playlist: playlist || undefinedevents = {
      "onReady"/span>: onPlayerReady
    };
    const defaultOptions = config;
    const playerOptions = Object.assign（{}, defaultOptions, settings）。
    players.push(new YT.Player（視頻，playerOptions））。
  }

  return {
    addPlayer
  };
}());


const managePlayer = (function makeManagePlayer() {
  const config = {
    height: 600,
    width: 360playerVars = {
    autoplay: 0,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3,
    rel: 0function show（el） {
    el.classList.remove("hide") 。
  }

  function createPlayerOptions（settings） {
    function paramInOptions(opts, param) {
      if (settings[param] !== undefined) {
        opts[param] = settings[param];
        delete settings[param]。
      }
      return opts;
    }

    const optionParams = ["width", "height", "playlist", "host", "videoid"】。]
    const defaultOptions = config;
    const preferred = optionParams.reduce（paramInOptions, {}）。
    const playerOptions = Object.assign（{}, defaultOptions, preferred）。
    //設定現在應該只包括playerVars。
    const defaultVars = config.playerVars;
    const playerVars = settings.playerVars;
    config.playerVars = Object.assign（{}, defaultVars, playerVars）。
    return playerOptions;
  }

  function createPlayer(videoWrapper, settings = {}, videoIds = "" ) {
    const video = videoWrapper.querySelector(".video") 。
    if (!videoIds) {
      videoIds = video.dataset.id。
    }
    const playerOptions = createPlayerOptions（設定）。
    return videoPlayer.addPlayer（視頻，playerOptions，videoIds）。
  }

  function createCoverClickHandler(playerSettings, videoIds) {
    return function coverClickHandler（evt）{
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show（wrapper）。
      const player = createPlayer（wrapper, playerSettings, videoIds）。
      wrapper.player = player。
    };
  }

  function addPlayer(coverSelector, playerSettings, videoIds) {
    const clickHandler = createCoverClickHandler（playerSettings, videoIds）。
    manageCover.addCoverHandler(coverSelector, clickHandler)。
  }


  function addPlayerRandomVideo（coverSelector, playerSettings, videoIds） {
    const index = Math.floor（Math. random() * videoIds.length) 。
    const videoId = videoIds[index];
    const clickHandler = createCoverClickHandler（playerSettings, videoId）。
    manageCover.addCoverHandler(coverSelector, clickHandler)。
  }


  function init（playerOptions） {
    Object.assign（config, playerOptions）。
  }

  return {
    add: addPlayer,
    addRandom: addPlayerRandomVideo,
    激活
  };
}());


function onYouTubeIframeAPIReady(/span>) {
  managePlayer.init（{
    playerVars: {
      autoplay: 0.
    }
  });
  managePlayer.addRandom(" .playa", {
    height: 207,
    start: 45,
    width: 277"0dgNc5S8cLI"/span>,
    "mnfmQe8Mv1g",
    "-Xgi_way56U",
    "CHahce95B1g".
  ]);
  managePlayer.add(".playb"/span>, {
    height: 207,
    width: 277addRandom(".playc"/span>, {
    height: 207,
    width: 277.
  }, [
    "0dgNc5S8cLI"/span>,
    "-Xgi_way56U"。
    "CHahce95B1g".
  ]);
  managePlayer.add(".playd"/span>, {
    height: 207,
    width: 277add(".playe"/span>, {
    height: 207,
    width: 277add(".playf"/span>, {
    height: 207,
    width: 277add(".playg"/span>, {
    height: 207,
    width: 277add(".playh"/span>, {
    height: 207,
    width: 277add(".playi"/span>, {
    height: 207,
    width: 277init（{
    container: ".container",
    playButton: ".thePlay"。
  });
}
html,body { height: 100%; margin: 0; padding: 0;}body { background: white; animation: fade 2s ease 0s forwards;}@keyframes fade { 0% { opacity: 0; }  100% { opacity: 1; }}.outer { display: flex; flex-wrap: wra; min-height: 100%; width: 310px; box-sizing: border-box; justify-content: center; align-content: center; margin: auto; gap: 20px; /*list-style:none;*/ padding: 0;}.outer。 isOpen { display: flex; width: auto; align-content: stretch; }. container { display: flex; justify-content: center;}.container.active { {span class="hljs-attribute">flex: 1 0 0; animation: fadebody 5s ease 0s forward; background-size: 165px 165px; background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, 茶色5px, #0000 5px), linear-gradient（黑色10px, #0000 10px 160px, black 160px）,) linear-gradient(90deg, black 10px, #0000 10px 160px, 黑色160px), linear-gradient(橙色15px, #0000 15px 155px, orange 155px）。) linear-gradient(90deg, orange 15px, #0000 15px 155px, 橙色155px), linear-gradient(black 20px, #0000 20px 150px, black 150px）。) linear-gradient(90deg, black20px, #0000 20px 150px, 黑色150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px) 。linear-gradient(90deg, teal 25px, #0000 25px 145px, 茶色145px), linear-gradient(black 30px, #0000 30px 140px, black 140px）,) linear-gradient(90deg, black 30px, #0000 30px 140px, 黑色140px), linear-gradient(橙色35px, #0000 35px 135px, orange 135px）。) linear-gradient(90deg, orange 35px, #0000 35px 135px, 橙色135px), linear-gradient(black 40px, #0000 40px 130px, black 130px）。) linear-gradient(90deg, black40px, #0000 40px 130px, 黑色130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px）。) linear-gradient(90deg, teal 45px, #0000 45px 125px, 茶色125px), linear-gradient(black 50px, #0000 50px 120px, black 120px）。) linear-gradient(90deg, black50px, #0000 50px 120px, 黑色120px), linear-gradient(橙色55px, #0000 55px 115px, orange 115px）,) linear-gradient(90deg, orange 55px, #0000 55px 115px, 橙色115px), linear-gradient(black 60px, #0000 60px 110px, black 110px）。) linear-gradient(90deg, black 60px, #0000 60px 110px, 黑色110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px）。) linear-gradient(90deg, teal 65px, #0000 65px 105px, 茶色105px), linear-gradient(black 70px, #0000 70px 100px, black 100px）。) linear-gradient(90deg, black 70px, #0000 70px 100px, 黑色100px), linear-gradient(橙色75px, #0000 75px 95px, orange 95px）,) linear-gradient(90deg, orange 75px, #0000 75px 95px, 橙色95px), linear-gradient(black 80px, #0000 80px 90px, 黑色90px), linear-gradient(90deg, 黑色80px, #0000 80px 90px, 黑色90px），linear-gradient（茶色，茶色）。 }. thePlay{ /*margin:
   auto 20px;*/ width: 90px; height: 90px; border-radius: 50%; cursor: pointer; flex-shhrink: 0; fill: blue;}/* when container is active hide the svg */. container.active .thePlay { display: none;}。 inner-container { display: none;}/* when container is active hide the svg and show the inner container*/。 container.active . thePlay { display: none;}.container。 active .inner-container { display: flex;}。 container.active .inner-container. curtain { display: block;}@keyframes fadebody { 0% { opacity: 0; }  100% { opacity: 1; }}.curtain { position: relative; max-width: 640px; margin: auto; flex: 1 0 0%; }. panel-left,.panel-right { position: absolute; height: 100%; width: calc(50%   1px); /*舍入錯誤修復 */ top: 0%; transition: all ease 10s; /*background-image: url("https://picsum. photos/600"); background-size: cover; background-repeat: no-repeat; background-position: center;*/ overflow: hidden;}.panel-left { {span class="hljs-attribute">left: 0; /*background-color: rgb(91, 96, 106);*/}.panel-right { right: 0; /*background-color: rgb(229, 211, 211);*/}. panel-left::before,.panel-right::before { content。""; position: absolute; height: 100%; width: 200%; top: 0; left: 0; background-image: url("https://picsum. photos/id/26/1920/1080"); background-size: auto; background-repeat: no-repeat; background-position: 0 0; }. curtain2 .panel-left::before，. curtain2 .panel-right::before { background-image: url("https://picsum.photos/id/27/1920/1080");}.curtain3 。 panel-left::before,.curtain3 . panel-right::before { background-image: url("https://picsum.photos/id/27/1920/1080"); }. panel-right::before { left: -100%; }。 container.active .curtain . panel-left { animation: curtain1 8sforwards; animation-delay: 1s;}@keyframes curtain1 {  to { transform: translateX(-100%); }}.container.active 。 curtain .panel-right { animation: curtain2 8s forwards; animation-delay: 1s;}@keyframes curtain2 {  to { transform: translateX(100%); }}@keyframes curtain3 {  to { transform: translateX(100%); }}@keyframes curtain4 {  to { transform: translateX(100%); }}@keyframes curtain5 {  to { transform: translateX(100%); }}@keyframes curtain6 {  to { transform: translateX(100%); }}@keyframes curtain7 {  to { transform: translateX(100%); }}@keyframes curtain8 {  to { transform: translateX(100%); }}@keyframes curtain9 {  to { transform: translateX(100%); }}.ratio-keeper { position: relative; height: 0; padding-top: 56.25%; border-radius: 25px; margin: auto; overflow: hidden; }. video-frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.hide { display: none;}

svg.thePlay {
 pointer-events: none;
}
<ul class="outer"> 
  <li class="container"> 
< svg class="playa thePlay" width="64"  高度="64" viewBox="0 0 64 64" pointer-events="無" > 
<g id="play"> 
  <title>/span>Play</title>
  < circle cx="32" cy="32" r="26" fill="white" pointer-events=" visiblePainted" /> 
  <path d="M25。 6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
        M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z"
    pointer-events=" visiblePainted" />
  
</g> 
</svg>/span>
    <div class="inner-container curtain1"> 
      <div class="rate-keeper">
        <div class="wrapa"/span>>
          <div class="video video-frame"/span>> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container"> 
    < svg class="playb thePlay" width="64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain2"> 
      <div class="rate-keeper">
        <div class="wrapb"/span>>
          < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container with-curtain">/span>
    < svg class="playc thePlay" width="64""64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain3"> 
      <div class="rate-keeper">
        <div class="wrapc"/span>>
          <div class="video video-frame"/span>> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container"> 
    < svg class="playd thePlay" width="64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain4"> 
      <div class="rate-keeper">
        <div class="wrapc"/span>>
          < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container"> 
    < svg class="playe thePlay" width="64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain5"> 
      <div class="rate-keeper">
        <div class="wrapc"/span>>
          < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container"> 
    < svg class="playf thePlay" width="64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain6"> 
      <div class="rate-keeper">
        <div class="wrapc"/span>>
          < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container"> 
    < svg class="playg thePlay" width="64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain7"> 
      <div class="rate-keeper">
        <div class="wrapc"/span>>
          < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container"> 
    < svg class="playh thePlay" width="64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain8"/span>>
      <div class="rate-keeper">
        <div class="wrapc"/span>>
          < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
  <li class="container"> 
    < svg class="playi thePlay" width="64" height="64" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain9"/span>>
      <div class="rate-keeper">
        <div class="wrapc"/span>>
          < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
        </div>/span>
        <div class="panel-left"/span>> </div>>
        <div class="panel-right"/span>> </div>>
      </div>/span>
    </div>/span>
  </li> 
</ul>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

uj5u.com熱心網友回復：

在svg中，你需要在現有路徑的下方或上方添加一個與圖示相等的透明圓（或路徑），并將其填充設定為透明。

<circle fill=transparent cx="32" cy="32" r="32"/>/code>

然后也給svg里面的組添加一個獨特的類。我在組中添加了class="justTheIcon"，這也是你在 manageCover.init 函式中的目標類。 

 manageCover.init（{
    容器。".container",
    playButton: ".justTheIcon"

這是你的jsfiddle和嵌入式代碼的一個編輯過的例子：

  • https://jsfiddle.net/9w48zyh7/4/

    • const manageCover = (function makeManageCover（） {
  const config = {};

  function show（el） {
    el.classList.remove("hide"/span>)。
  }

  function hide（el） {
    el.classList.add("hide"/span>)。
  }

  function hideAll（elements） {
    elements.forEach(hide)。
  }

  function showCovers（playButton） {
    const cover = playButton.parentElement;
    cover.classList.add("active") 。
    show(cover)。
  }

  function coverClickHandler（evt） {
    hideAll(config.containers) 。
    const cover = evt.currentTarget;
    showCovers（cover）。
     document.querySelector(' 。 outer'）.classList.add（'isOpen'）。
  }

  function addClickToButtons（playButtons） {
    playButtons.forEach(function addEventHandler(playButton) {
      playButton.addEventListener("click", coverClickHandler) 。
    });
  }

  function addCoverHandler(coverSelector, handler) {
    const cover = document.querySelector（coverSelector）。
    cover.addEventListener("click", handler) 。
  }

  function init（selectors）{
    config.containers = document.querySelectorAll（selectors.container）。
    const playButtons = document.querySelectorAll（selectors.playButton）。
    addClickToButtons（playButtons）。
  }

  return {
    addCoverHandler,
    init,
    顯示
  };
}());

const videoPlayer = (function makeVideoPlayer() {
  const players = [] 。

  const tag = document.createElement（"script"）。
  tag.src = "https://www.youtube.com/player_api"。
  const firstScriptTag = document.getElementsByTagName("script") [0] 。
  firstScriptTag.parentNode.insertBefore（tag, firstScriptTag）。


  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume（100）。
  }

  function addPlayer(video, settings, videoIds = video.dataset.id) {
    const videoId = !Array.isArray(videoIds) & & videoIds;
    const playlist = Array.isArray(videoIds) & & videoIds;
    const config = {
      host: "https://www.youtube-nocookie.com",
      videoId
    };
    config.playerVars = {
      playlist: playlist || undefinedevents = {
      "onReady"/span>: onPlayerReady
    };
    const defaultOptions = config;
    const playerOptions = Object.assign（{}, defaultOptions, settings）。
    players.push(new YT.Player（視頻，playerOptions））。
  }

  return {
    addPlayer
  };
}());


const managePlayer = (function makeManagePlayer() {
  const config = {
    height: 600,
    width: 360playerVars = {
    autoplay: 0,
    controls: 1,
    disablekb: 1,
    enablejsapi: 1,
    fs: 0,
    iv_load_policy: 3,
    rel: 0function show（el） {
    el.classList.remove("hide") 。
  }

  function createPlayerOptions（settings） {
    function paramInOptions(opts, param) {
      if (settings[param] !== undefined) {
        opts[param] = settings[param];
        delete settings[param]。
      }
      return opts;
    }

    const optionParams = ["width", "height", "playlist", "host", "videoid"】。]
    const defaultOptions = config;
    const preferred = optionParams.reduce（paramInOptions, {}）。
    const playerOptions = Object.assign（{}, defaultOptions, preferred）。
    //設定現在應該只包括playerVars。
    const defaultVars = config.playerVars;
    const playerVars = settings.playerVars;
    config.playerVars = Object.assign（{}, defaultVars, playerVars）。
    return playerOptions;
  }

  function createPlayer(videoWrapper, settings = {}, videoIds = "" ) {
    const video = videoWrapper.querySelector(".video") 。
    if (!videoIds) {
      videoIds = video.dataset.id。
    }
    const playerOptions = createPlayerOptions（設定）。
    return videoPlayer.addPlayer（視頻，playerOptions，videoIds）。
  }

  function createCoverClickHandler(playerSettings, videoIds) {
    return function coverClickHandler（evt）{
      const cover = evt.currentTarget;
      const wrapper = cover.nextElementSibling;
      show（wrapper）。
      const player = createPlayer（wrapper, playerSettings, videoIds）。
      wrapper.player = player。
    };
  }

  function addPlayer(coverSelector, playerSettings, videoIds) {
    const clickHandler = createCoverClickHandler（playerSettings, videoIds）。
    manageCover.addCoverHandler(coverSelector, clickHandler)。
  }


  function addPlayerRandomVideo（coverSelector, playerSettings, videoIds） {
    const index = Math.floor（Math. random() * videoIds.length) 。
    const videoId = videoIds[index];
    const clickHandler = createCoverClickHandler（playerSettings, videoId）。
    manageCover.addCoverHandler(coverSelector, clickHandler)。
  }


  function init（playerOptions） {
    Object.assign（config, playerOptions）。
  }

  return {
    add: addPlayer,
    addRandom: addPlayerRandomVideo,
    激活
  };
}());


function onYouTubeIframeAPIReady(/span>) {
  managePlayer.init（{
    playerVars: {
      autoplay: 0.
    }
  });
  managePlayer.addRandom(" .playa", {
    height: 207,
    start: 45,
    width: 277"0dgNc5S8cLI"/span>,
    "mnfmQe8Mv1g",
    "-Xgi_way56U",
    "CHahce95B1g".
  ]);
  managePlayer.add(".playb"/span>, {
    height: 207,
    width: 277addRandom(".playc"/span>, {
    height: 207,
    width: 277.
  }, [
    "0dgNc5S8cLI"/span>,
    "-Xgi_way56U"。
    "CHahce95B1g".
  ]);
  managePlayer.add(".playd"/span>, {
    height: 207,
    width: 277add(".playe"/span>, {
    height: 207,
    width: 277add(".playf"/span>, {
    height: 207,
    width: 277add(".playg"/span>, {
    height: 207,
    width: 277add(".playh"/span>, {
    height: 207,
    width: 277add(".playi"/span>, {
    height: 207,
    width: 277init（{
    container: ".container",
    playButton: ".justTheIcon".
  });
}
    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
  animation: fade 2s ease 0s forward;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 310px;
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  差距。20px;
  /*list-style:none;*/
  padding: 0;
}


.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}


.container {
  display: flex;
  justify-content: center;
}

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forward;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, 茶色5px, #0000 5px), linear-gradient（黑色10px, #0000 10px 160px, black 160px）。) linear-gradient(90deg, black 10px, #0000 10px 160px, 黑色160px), linear-gradient(橙色15px, #0000 15px 155px, orange 155px）。) linear-gradient(90deg, orange 15px, #0000 15px 155px, 橙色155px), linear-gradient(black 20px, #0000 20px 150px, black 150px）。) linear-gradient(90deg, black20px, #0000 20px 150px, 黑色150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px) 。linear-gradient(90deg, teal 25px, #0000 25px 145px, 茶色145px), linear-gradient(black 30px, #0000 30px 140px, black 140px）,) linear-gradient(90deg, black 30px, #0000 30px 140px, 黑色140px), linear-gradient(橙色35px, #0000 35px 135px, orange 135px）。) linear-gradient(90deg, orange 35px, #0000 35px 135px, 橙色135px), linear-gradient(black 40px, #0000 40px 130px, black 130px）。) linear-gradient(90deg, black40px, #0000 40px 130px, 黑色130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px）。) linear-gradient(90deg, teal 45px, #0000 45px 125px, 茶色125px), linear-gradient(black 50px, #0000 50px 120px, black 120px）。) linear-gradient(90deg, black50px, #0000 50px 120px, 黑色120px), linear-gradient(橙色55px, #0000 55px 115px, orange 115px）,) linear-gradient(90deg, orange 55px, #0000 55px 115px, 橙色115px), linear-gradient(black 60px, #0000 60px 110px, black 110px）。) linear-gradient(90deg, black 60px, #0000 60px 110px, 黑色110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px）。) linear-gradient(90deg, teal 65px, #0000 65px 105px, 茶色105px), linear-gradient(black 70px, #0000 70px 100px, black 100px）。) linear-gradient(90deg, black 70px, #0000 70px 100px, 黑色100px), linear-gradient(橙色75px, #0000 75px 95px, orange 95px）,) linear-gradient(90deg, orange 75px, #0000 75px 95px, 橙色95px), linear-gradient(black 80px, #0000 80px 90px, 黑色90px), linear-gradient(90deg, 黑色80px, #0000 80px 90px, 黑色 90px), linear-gradient(teal, teal)。
}

#play{
  /*margin: auto 20px;*/.
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: 指標。
  flex-shrink: 0;
  填充：藍色。

}

/* 當容器處于活動狀態時，隱藏svg */。

.container.active .thePlay{
  display: none;
}

.inner-container {
  display: none;
}



/* 當容器處于活動狀態時，隱藏svg并顯示內部容器*/。

.container.active .thePlay{
  display: none;
}

.container.active .inner-container {
  display: flex;
}

.container.active .inner-container.curbtain {
  display: block;
}

@keyframes fadebody {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}



.curtain {
  position: relative;
  max-width: 640px;
  margin: auto;
  flex: 1 0 0%。
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: calc(50%   1px) 。
  /*四舍五入錯誤修復 */
  top: 0%;
  transition: all ease 10s;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  背景-位置：中心；*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/ 
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/ 
}

.panel-left::before,
.panel-right::before {
  content: ""。
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-image: url（"https://picsum.photos/id/26/1920/1080"）。
  background-size: auto;
  background-repeat: no-repeat;
  background-position: 0 0;
}

.curtain2 .panel-left: :before,
.curtain2 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080") 。
}

.curtain3 .panel-left: :before,
.curtain3 .panel-right::before {
  background-image: url("https://picsum.photos/id/27/1920/1080"/span>)。
}

.panel-right: :before {
  left: -100%;
}

.container.active .curtain .panel-left{
  animation: curtain1 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain1 {
  to {
    transform: translateX（-100%）。
  }
}

.container.active .curtain .panel-right{
  animation: curtain2 8s forwards;
  animation-delay: 1s;
}

@keyframes curtain2 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain3 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain4 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain5 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain6 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain7 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain8 {
  to {
    transform: translateX（100%）。
  }
}

@keyframes curtain9 {
  to {
    transform: translateX（100%）。
  }
}


.ratio-keeper {
  position: relative;
  height: 0;
  padding-top: 56.25%;
  border-radius: 25px;
  margin: auto;
  overflow: hidden;
}

.video-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%。
}

.hide {
  display: none;
}
    <ul class="outer" > 
    <li class="container"> 
      < svg class="playa thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        < g id="play" class="justTheIcon"> 
          <title>Play</title>/span>
          < circle fill=transparent cx="32" cy="32" r="32"/> 
          <path d="M25。 6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
          M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
        </g>
      </svg>/span>
      <div class="inner-container curtain1"> 
        <div class="rate-keeper">
          <div class="wrapa"/span>>
            <div class="video video-frame"/span>> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playb thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain2"> 
        <div class="rate-keeper">
          <div class="wrapb"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container with-curtain">/span>
      < svg class="playc thePlay" width="64""64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain3"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            <div class="video video-frame"/span>> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playd thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain4"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playe thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain5"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playf thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain6"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playg thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain7"> 
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playh thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain8"/span>>
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
    <li class="container"> 
      < svg class="playi thePlay" width="64" height="64" viewBox="0 0 64 64"> 
        <use href="#play"/span> />
      </svg>
      <div class="inner-container curtain9"/span>>
        <div class="rate-keeper">
          <div class="wrapc"/span>>
            < div class="video video-frame" data-id="0dgNc5S8cLI"> </div>>
          </div>/span>
          <div class="panel-left"/span>> </div>>
          <div class="panel-right"/span>> </div>>
        </div>/span>
      </div>/span>
    </li> 
  </ul>/span>
    <iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

    轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/320126.html

    標籤：

    上一篇：如何為xmlns匯入的SVG圖片設定樣式？

    下一篇：從一列中找到這樣的值，這些值必須與另一列中的所有期望值相關聯

    標籤雲
    其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

    熱門瀏覽
    • 【從零開始擼一個App】Dagger2

      Dagger2是一個IOC框架，一般用于Android平臺，第一次接觸的朋友，一定會被搞得暈頭轉向。它延續了Java平臺Spring框架代碼碎片化，注解滿天飛的傳統。嘗試將各處代碼片段串聯起來，理清思緒，真不是件容易的事。更不用說還有各版本細微的差別。 與Spring不同的是，Spring是通過反射 ......

      uj5u.com 2020-09-10 06:57:59 more
    • Flutter Weekly Issue 66

      新聞 Flutter 季度調研結果分享 教程 Flutter+FaaS一體化任務編排的思考與設計 詳解Dart中如何通過注解生成代碼 GitHub 用對了嗎？Flutter 團隊分享如何管理大型開源專案 插件 flutter-bubble-tab-indicator A Flutter librar ......

      uj5u.com 2020-09-10 06:58:52 more
    • Proguard 常用規則

      介紹 Proguard 入口，如何查看輸出，如何使用 keep 設定入口以及使用實體，如何配置壓縮，混淆，校驗等規則。

      ......

      uj5u.com 2020-09-10 06:59:00 more
    • Android 開發技術周報 Issue#292

      新聞 Android即將獲得類AirDrop功能：可向附近設備快速分享檔案 谷歌為安卓檔案管理應用引入可安全隱藏資料的Safe Folder功能 Android TV新主界面將顯示電影、電視節目和應用推薦內容 泄露的Android檔案暗示了傳說中的谷歌Pixel 5a與折疊屏新機 谷歌發布Andro ......

      uj5u.com 2020-09-10 07:00:37 more
    • AutoFitTextureView Error inflating class

      報錯： Binary XML file line #0: Binary XML file line #0: Error inflating class xxx.AutoFitTextureView 解決： <com.example.testy2.AutoFitTextureView android: ......

      uj5u.com 2020-09-10 07:00:41 more
    • 根據Uri，Cursor沒有獲取到對應的屬性

      Android： 背景：呼叫攝像頭，拍攝視頻，指定保存的地址，但是回傳的Cursor檔案，只有名稱和大小的屬性，沒有其他諸如時長，連ID屬性都沒有 使用 cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Video.Media.DURATIO ......

      uj5u.com 2020-09-10 07:00:44 more
    • Android連載29-持久化技術

      一、持久化技術 我們平時所使用的APP產生的資料，在記憶體中都是瞬時的，會隨著斷電、關機等丟失資料，因此android系統采用了持久化技術，用于存盤這些“瞬時”資料 持久化技術包括：檔案存盤、SharedPreference存盤以及資料庫存盤，還有更復雜的SD卡記憶體儲。 二、檔案存盤 最基本存盤方式， ......

      uj5u.com 2020-09-10 07:00:47 more
    • Android Camera2Video整合到自己專案里

      背景： Android專案里呼叫攝像頭拍攝視頻，原本使用的 MediaStore.ACTION_VIDEO_CAPTURE， 后來因專案需要，改成了camera2 1.Camera2Video 官方demo有點問題，下載后，不能直接整合到專案 問題1.多次拍攝視頻崩潰 問題2.雙擊record按鈕， ......

      uj5u.com 2020-09-10 07:00:50 more
    • Android 開發技術周報 Issue#293

      新聞 谷歌為Android TV開發者提供多種新功能 Android 11將自動填表功能整合到鍵盤輸入建議中 谷歌宣布Android Auto即將支持更多的導航和數字停車應用 谷歌Pixel 5只有XL版本 搭載驍龍765G且將比Pixel 4更便宜 [圖]Wear OS將迎來重磅更新：應用啟動時間 ......

      uj5u.com 2020-09-10 07:01:38 more
    • 海豚星空掃碼投屏 Android 接收端 SDK 集成 六步驟

      掃碼投屏，開放網路，獨占設備，不需要額外下載軟體，微信掃碼，發現設備。支持標準DLNA協議，支持倍速播放。視頻，音頻，圖片投屏。好點意思。還支持自定義基于 DLNA 擴展的操作動作。好像要收費，沒體驗。 這里簡單記錄一下集成程序。 一 跟目錄的build.gradle添加私有mevan倉庫 mave ......

      uj5u.com 2020-09-10 07:01:43 more
    最新发布
    • 歡迎頁輪播影片

      如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

      uj5u.com 2023-04-20 08:40:31 more
    • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

      一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

      uj5u.com 2023-04-20 08:40:11 more
    • 歡迎頁輪播影片

      如圖，引導開始，球從上落下，同時淡入文字，然后文字開始輪播，最后一頁時停止，點擊進入首頁。 在來看看效果圖。 重力球先不講，主要歡迎輪播簡單實作 首先新建一個類 TextTranslationXGuideView，用于影片展示 文本是類似的，最后會有個圖片箭頭影片，布局很簡單，就是一個 TextVi ......

      uj5u.com 2023-04-20 08:39:36 more
    • 【FAQ】關于華為推送服務因營銷訊息頻次管控導致服務通訊類訊息

      一． 問題描述 使用華為推送服務下發IM訊息時，下發訊息請求成功且code碼為80000000，但是手機總是收不到訊息； 在華為推送自助分析（Beta）平臺查看發現，訊息發送觸發了頻控。 二． 問題原因及背景 2023年1月05日起，華為推送服務對咨詢營銷類訊息做了單個設備每日推送數量上限管理，具體 ......

      uj5u.com 2023-04-20 08:39:13 more
    • iOS從UI記憶體地址到讀取成員變數（oc/swift）

      開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

      uj5u.com 2023-04-19 09:16:23 more
    • FIDE重磅更新！性能飛躍！體驗有禮！

      FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

      uj5u.com 2023-04-19 09:16:15 more
    • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

      華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

      uj5u.com 2023-04-19 09:15:46 more
    • iOS從UI記憶體地址到讀取成員變數（oc/swift）

      開發除錯時，我們發現bug時常首先是從UI顯示發現例外，下一步才會去定位UI相關連的資料的。XCode有給我們提供一系列debug工具，但是很多人可能還沒有形成一套穩定的除錯流程，因此本文嘗試解決這個問題，順便提出一個暴論：UI顯示例外問題只需要兩個步驟就能完成定位作業的80%： 定位例外 UI 組 ......

      uj5u.com 2023-04-19 09:14:53 more
    • FIDE重磅更新！性能飛躍！體驗有禮！

      FIDE 開發者工具重構升級啦！實作500%性能提升，誠邀體驗！ 一直以來不少開發者朋友在社區反饋，在使用 FIDE 工具的程序中，時常會遇到諸如加載不及時、代碼預覽/渲染性能不如意的情況，十分影響開發體驗。 作為技術團隊，我們深知一件趁手的開發工具對開發者的重要性，因此，在2023年開年，FinC ......

      uj5u.com 2023-04-19 09:14:08 more
    • 游戲內嵌社區服務開放，助力開發者提升玩家互動與留存

      華為 HMS Core 游戲內嵌社區服務提供快速訪問華為游戲中心論壇能力，支持玩家直接在游戲內瀏覽帖子和交流互動，助力開發者擴展內容生產和觸達的場景。 一、為什么要游戲內嵌社區？ 二、游戲內嵌社區的典型使用場景 1、游戲內打開論壇 您可以在游戲內繪制論壇入口，為玩家提供沉浸式發帖、瀏覽、點贊、回帖、 ......

      uj5u.com 2023-04-19 09:08:34 more

    Copyright © 2010-2020 有解無憂