将svgs定位到一个盒子里

Posted

技术标签:

【中文标题】将svgs定位到一个盒子里【英文标题】：Positioning svgs into a box 【发布时间】：2021-11-02 04:27:11 【问题描述】：

现在它们只是在一条水平线上。

我如何将它们放在网格中，像盒子一样的形状？

我一直无法弄清楚如何做到这一点。

谁能教我怎么做？

将 svg 放置在类似形状的盒子中。

我尝试使用网格来做到这一点，但我无法弄清楚。

https://jsfiddle.net/xn2s30yc/

const manageCover = (function makeManageCover() 
    const config = ;

    function show(el) 
        el.classList.remove("hide");
    

    function hide(el) 
        el.classList.add("hide");
    

    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,
        show
    ;
());

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

        config.events = 
            "onReady": onPlayerReady
        ;
        const defaultOptions = config;
        const playerOptions = Object.assign(, defaultOptions, settings);
        players.push(new YT.Player(video, playerOptions));
    

    return 
        addPlayer
    ;
());


const managePlayer = (function makeManagePlayer() 
    const config = 
        height: 600,
        width: 360
    ;
    config.playerVars = 
        autoplay: 0,
        controls: 1,
        disablekb: 1,
        enablejsapi: 1,
        fs: 0,
        iv_load_policy: 3,
        rel: 0
    ;

    function 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);
        // settings should now only consist of 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(settings);
        return videoPlayer.addPlayer(video, 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,
        init
    ;
());


function onYouTubeIframeAPIReady() 
    managePlayer.init(
        playerVars: 
            autoplay: 0
        
    );
    managePlayer.addRandom(".playa", 
        height: 207,
        start: 45,
        width: 277
    , [
        "0dgNc5S8cLI",
        "mnfmQe8Mv1g",
        "-Xgi_way56U",
        "CHahce95B1g"
    ]);
    managePlayer.add(".playb", 
        height: 207,
        width: 277
    );

    managePlayer.addRandom(".playc", 
        height: 207,
        width: 277
    , [
        "0dgNc5S8cLI",
        "-Xgi_way56U",
        "CHahce95B1g"
    ]);
    managePlayer.add(".playd", 
        height: 207,
        width: 277
    );

    managePlayer.add(".playe", 
        height: 207,
        width: 277
    );

    managePlayer.add(".playf", 
        height: 207,
        width: 277
    );

    managePlayer.add(".playg", 
        height: 207,
        width: 277
    );
    managePlayer.add(".playh", 
        height: 207,
        width: 277
    );
    managePlayer.add(".playi", 
        height: 207,
        width: 277
    );
    managePlayer.add(".playj", 
        height: 207,
        width: 277
    );
    managePlayer.add(".playk", 
        height: 207,
        width: 277
    );
    managePlayer.add(".playl", 
        height: 207,
        width: 277
    );
    manageCover.init(
        container: ".container",
        playButton: ".thePlay"
    );

html,
body 
  height: 100%;
  margin: 0;
  padding: 0;


body 
  background: #353198;
  animation: fade 2s ease 0s forwards;


@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 forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px), linear-gradient(teal 65px, #0000 65px 105px, teal 105px), linear-gradient(90deg, teal 65px, #0000 65px 105px, teal 105px), linear-gradient(black 70px, #0000 70px 100px, black 100px), linear-gradient(90deg, black 70px, #0000 70px 100px, black 100px), linear-gradient(orange 75px, #0000 75px 95px, orange 95px), linear-gradient(90deg, orange 75px, #0000 75px 95px, orange 95px), linear-gradient(black 80px, #0000 80px 90px, black 90px), linear-gradient(90deg, black 80px, #0000 80px 90px, black 90px), linear-gradient(teal, teal);


.thePlay 
  margin: auto 20px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  fill: blue;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));



/* 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);
  /* rounding error fix */
  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 
  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 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">
    <svg class="playa thePlay"   viewBox="0 0 64 64">
      <g id="play">
        <title>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>
    <div class="inner-container curtain curtain1">
      <div class="ratio-keeper">
        <div class="wrapa">
          <div class="video video-frame"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playb thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain2">
      <div class="ratio-keeper">
        <div class="wrapb">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playc thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain3">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playd thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain4">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playe thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain5">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playf thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain6">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playg thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain7">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playh thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain8">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playi thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain9">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playj thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain10">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playk thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain11">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
  <div class="container with-curtain">
    <svg class="playl thePlay"   viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
    <div class="inner-container curtain curtain12">
      <div class="ratio-keeper">
        <div class="wrapc">
          <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
        </div>
        <div class="panel-left"></div>
        <div class="panel-right"></div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

【参考方案1】：

弹性 https://jsfiddle.net/sL15fyo6/

.outer 
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  width: 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");

【讨论】：

【参考方案2】：

网格 https://jsfiddle.net/p1fxwdey/1/

.outer 
  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");

【讨论】：

以上是关于将svgs定位到一个盒子里的主要内容，如果未能解决你的问题，请参考以下文章

定位的盒子居中显示

CSS基础知识五定位

CSS中盒子模型的标准流定位原则是啥?

前端基础-定位

零基础学前端之定位

零基础学前端之定位