SVG не отображаются правильно - PullRequest
Новая
       11

SVG не отображаются правильно

1 голос
/ 02 августа 2020

Почему SVG обрезаны и как это исправить?

Что неправильно закодировано?

Код: https://jsfiddle.net/gxnaw2L8/

Должно выглядеть так:

enter image description here

But instead, the SVG's are looking like this.

image 

const load = (function makeLoad() {
   "use strict";

   function _load(tag) {
      return function (url) {
         return new Promise(function (resolve) {
            const element = document.createElement(tag);
            const parent = "body";
            const attr = "src";
            element.onload = function () {
               resolve(url);
            };
            element[attr] = url;
            document[parent].appendChild(element);
         });
      };
   }
   return {
      js: _load("script")
   };
}());

const videoPlayer = (function makeVideoPlayer() {
   "use strict";
   const players = [];
   let playerVars = {};

   function onPlayerReady(event) {
      const player = event.target;
      player.setVolume(100); // percent
   }

   let hasShuffled = false;

   function onPlayerStateChange(event) {
      const player = event.target;
      if (!hasShuffled) {
         player.setShuffle(true);
         player.playVideoAt(0);
         hasShuffled = true;
      }
      if (event.data === YT.PlayerState.PLAYING) {
         for (let i = 0; i < players.length; i++) {
            if (players[i] !== event.target) players[i].pauseVideo();
         }
      }

      if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
         player.seekTo(playerVars.start);
      }
   }

   function addVideo(video, settings) {
      playerVars = Object.assign({
         videoId: video.dataset.id,
         host: "https://www.youtube-nocookie.com",
         events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
         }
      }, settings);
      players.push(new YT.Player(video, playerVars));
   }

   function init(video, settings) {
      load.js("https://www.youtube.com/player_api").then(function () {
         YT.ready(function () {
            addVideo(video, settings);
         });
      });
   }
   return {
      init
   };
}());

function loadPlayer(opts) {
   "use strict";

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

   function initPlayer(wrapper) {
      const video = wrapper.querySelector(".video");
      opts.width = opts.width || 198;
      opts.height = opts.height || 198;
      opts.autoplay = 1;
      opts.controls = 1;
      opts.rel = 0;
      opts.enablejsapi = 1;
      opts.iv_load_policy = 3;
      opts.fs = 0;
      opts.disablekb = 1;

      function paramInOpts(settings, param) {
         if (opts[param] !== undefined) {
            settings[param] = opts[param];
         }
         return settings;
      }
      const settingsParams = ["width", "height", "videoid", "host"];
      const settings = settingsParams.reduce(paramInOpts, {});
      const playerVarsParams = ["autoplay", "cc_load_policy",
         "controls", "disablekb", "end", "fs", "iv_load_policy",
         "list", "listType", "loop", "playlist", "rel", "start"
      ];
      settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
      videoPlayer.init(video, settings);
   }

   function coverClickHandler(evt) {
      const wrapper = evt.currentTarget.nextElementSibling;
      show(wrapper);
      initPlayer(wrapper);
   }
   const cover = document.querySelector(opts.target);
   cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";


loadPlayer({
   target: ".alpha",
   start: 0,
   end: 280,
   loop: true
});
loadPlayer({
   target: ".beta",
   start: 0,
   end: 240,
   loop: true
});
loadPlayer({
   target: ".gamma",
   start: 0,
   end: 265,
   loop: true
});
loadPlayer({
   target: ".delta",
   start: 4,
   end: 254,
   loop: true
});
loadPlayer({
   target: ".epsilon",
   start: 0,
   end: 242,
   loop: true
});
loadPlayer({
   target: ".zeta",
   start: 0,
   end: 285,
   loop: true
});
loadPlayer({
   target: ".eta",
   start: 23,
   end: 312,
   loop: true
});
loadPlayer({
   target: ".theta",
   start: 2
});
loadPlayer({
   target: ".iota"
});
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

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

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



.container-left {
  float: left;
  width: 606px;
  margin: 0;
}

.container-left .wraph {
  position: relative;
  width: 606px;
  margin: 45px 0 0 0;
  overflow: hidden;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background-position: 0 -600px;
  background-size: 100% 200%;
}

.container-left .wraph .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-left .wraph .nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.container-left .wraph .nav li {
  float: left;
  width: 198px;
  height: 198px;
  margin: 0 0 3px 0;
  background: rgba(0, 0, 0, 0.2);
}

.container-left .wraph .nav li:nth-of-type(3n+2) {
  margin: 0 3px 0 3px;
}

.container-left .wraph .nav li:nth-of-type(n+7) {
  margin-bottom: 0;
}

.container-left .wraph .nav li svg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  fill: blue;
}




.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
  content: "";
  position: absolute;
  top: 0;
  left: 198px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.container-left .wraph .linesa::after {
  left: 399px;
}

.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
  content: "";
  position: absolute;
  top: 198px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #0059dd;
}

.container-left .wraph .linesb::after {
  top: 399px;
}

.container-left .wraph .nav li iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 198px;
  height: 198px;
  cursor: pointer;
}

.container-left .wraph .nav li .alpha,
.playinga {
  margin: 0;
}

.container-left .wraph .nav li .beta,
.playingb {
  margin: 0 201px 0;
}

.container-left .wraph .nav li .gamma,
.playingc {
  margin: 0 402px 0;
}

.container-left .wraph .nav li .delta,
.playingd {
  margin: 201px 0 0;
}

.container-left .wraph .nav li .epsilon,
.playinge {
  margin: 201px 201px 0;
}

.container-left .wraph .nav li .zeta,
.playingf {
  margin: 201px 402px 0;
}

.container-left .wraph .nav li .eta,
.playingg {
  margin: 402px 0 0;
}

.container-left .wraph .nav li .theta,
.playingh {
  margin: 402px 201px 0;
}

.container-left .wraph .nav li .iota,
.playingi {
  margin: 402px 402px 0;
}


a:focus {
  outline: 0;
}

.hide {
  display: none;
}
<div class="outer">
  <div class="tcell">
    <div class="container-left">
      <div class=" wraph">
        <ul class="nav">
          <li>
            <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <symbol id="play">
                <title>Play</title>
                <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
                <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
              </symbol>
            </svg>
            <svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playinga" data-id="ZPz3wzPlruA"></div>
            </div>
          </li>
          <li>
            <svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingb" data-id="VFMtNOxpV3o"></div>
            </div>
          </li>
          <li>
           
           <svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingc" data-id="Zkf4EDjV1_g"></div>
            </div>
          </li>
          <li>
          
          
            <svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingd" data-id="-Xgi_way56U"></div>
            </div>
          </li>
          <li>
            <svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playinge" data-id="EK3h0IADYrQ"></div>
            </div>
          </li>
          <li>
            <svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingf" data-id="YOw9J4K02H4"></div>
            </div>
          </li>
          <li>
            <svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingg" data-id="ID856YDIb6A"></div>
            </div>
          </li>
          <li>
            <svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingh" data-id="9Gn8ymkrlbI"></div>
            </div>
          </li>
          <li>
            <svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <use href="#play" />
            </svg>
            <div class="hide">
              <div class="video playingi" data-id="qYEooPeyz5M"></div>
            </div>
          </li>
        </ul>
        <div class="linesa"></div>
        <div class="linesb"></div>
      </div>
    </div>
  </div>
</div>

1 Ответ

3 голосов
/ 02 августа 2020

Это viewBox, который вы используете: viewbox="8.5 -12.2 7 48.49" Как видите, ширина изображения внутри составляет всего 7 единиц, а элементы, нарисованные вне viewBox, не отображаются . Также, если вы используете символы, может быть очень полезно использовать viewBox для символа. В этом случае <symbol id="play" viewBox="1.25 1.25 21.5 21.5">

Если вы будете использовать символ без атрибутов width height x и y, он будет принимать ширину элемента svg (первый пример)

Во втором примере I 'm using <use href="#play" width="50%" height="50%" x="25%" y="25%" /> Это означает, что используемый символ имеет половину размера элемента svg и левый верхний угол равен 25%

Кроме того, поскольку элемент символа не имеет заливки, вы можете дать ему заливку, как fill="red".

Чтобы узнать, какое значение viewBox использовать, я обернул элементы в группу <g id="the_symbol">, а в javascript I the_symbol.getBBox() это возвращает SVGRect {x: 1.25, y: 1.25, width: 21.5, height: 21.5} Итак, viewBox = "xy width height" 

viewBox="1.25 1.25 21.5 21.5"

Обратите внимание, что viewBox - это вид верблюжьего вида B ox 

svg{border:solid}
<svg width="198" height="198" viewBox="0 0 198 198">
  <symbol id="play" viewBox="1.25 1.25 21.5 21.5">
    <g id="the_symbol">
      <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
      <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
    </g>
  </symbol>
  <use href="#play" />
</svg>
<svg class="alpha" width="198" height="198" viewBox="0 0 198 198">
  <use href="#play" width="50%" height="50%" x="25%" y="25%" fill="red"/>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...