將svgs定位到一個盒子里 -有解無憂

現在它們只是在一條水平線上。

我將如何把它們放在一個網格中，像盒子一樣的形狀？

我還沒能弄清楚如何做到這一點。

誰能告訴我如何做到這一點？

將 svg 放在一個類似盒子的形狀中。

我試著用網格來做，但我沒能想出辦法。

。

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）。
    }

    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"/span>)。
    }

    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: 277add(".playj"/span>, {
        height: 207,
        width: 277add(".playk"/span>, {
        height: 207,
        width: 277add(".playl"/span>, {
        height: 207,
        width: 277init（{
        container: ".container",
        playButton: ".thePlay"。
    });
}

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;
  min-height: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.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, black70px, #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;
  填充：藍色。
  filter: 滴影(3px 3px 3px rgba(0, 0, 0, 0. 7））。)
}


/* 當容器被激活時，隱藏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%）。
  }
}

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

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

@keyframes curtain12 {
  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;
}

<div class="outer" > 
  <div class="container with-curtain"/span>>
    < svg class="playa thePlay" width="100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playb thePlay" width="100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playc thePlay" width="100%""100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playd thePlay" width="100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playe thePlay" width="100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playf thePlay" width="100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playg thePlay" width="100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playh thePlay" width="100%" height="100%" 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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playi thePlay" width="100%" height="100%" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain9"> 
      <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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playj thePlay" width="100%" height="100%" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain10"> 
      <div class="rate-keeper">/span>
        <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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playk thePlay" width="100%" height="100%" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain11"> 
      <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>
  </div>/span>
  <div class="container with-curtain">/span>
    < svg class="playl thePlay" width="100%" height="100%" viewBox="0 0 64 64"> 
      <use href="#play"/span> />
    </svg>
    <div class="inner-container curtain12"/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>
  </div>/span>
</div>/span>

uj5u.com熱心網友回復：

靈活性https://jsfiddle.net/sL15fyo6/

.outside {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  寬度：390px。
  box-sizing: border-box;
  justify-content: center;
  align-content: center;
  margin: auto;
  gap: 0;
}
.outer.isOpen {
  display: flex;
  width: auto;
  align-content: stretch;
}

添加的Javascript

document.querySelector(".outer").classList.add("isOpen")。

uj5u.com熱心網友回復：

Grid https://jsfiddle.net/p1fxwdey/1/

.outside {
  display: grid;
  grid-template-columns: 110px 110px 110px;
  gap: 0;
  align-content: center;
  justify-content: center;
  min-height: 100%;
  box-sizing: border-box;
}

.outer.isOpen {
  display: flex;
}

添加了Javascript

。

document.querySelector(".outer").classList.add("isOpen")。

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

標籤：

上一篇：<picture>相當于從webp到jepg的回退。

下一篇：回應性地調整影像和背景影像的大小，使之同步進行