Как вы центрируете изображение в центре SVG?

Question

Я пытаюсь расположить квадратное изображение в середине svg. Как это сделать? Я пробовал несколько вещей, но он продолжает появляться в верхнем углу.

Код: https://jsfiddle.net/0soLjvrp/

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 {
 
  width: 606px;
  margin: 0;
}

.container-left .jacketd {
  position: relative;
  height: 606px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/EvDQJbO.png") no-repeat 0 0;
  background-size: 100% 200%;
}

.container-left .jacketd .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  background: url("https://i.imgur.com/cZ8OKm5.png") no-repeat 0 0;
}

.container-left .jacketd .coversvg path {
  fill: none;
  stroke: #08f9ff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

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

.container-left .jacketd .lines::after {
  left: 399px;
}

.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: transparent;
}

.container-left .wraph .nav li svg:hover use {
  fill: #0059dd;
}

.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">

        <audio></audio>
        <div class="container ">
          
          <div class="container-left">
            
            
            <div class="jacketd" title="OPEN">
              <svg class="coversvg" width="198" height="198" viewBox="0 0 47.96 51.66">
                <title>Open</title>
                <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              </svg>
              <div class="lines"></div>
            </div>
            <div class="hide wraph">
             <ul class="nav">
          <li>
            <svg width="198" height="198" viewbox="8.5 -12.2 7 48.49">
              <g 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" />
              </g>
            </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>
        </div>
 

Answer 1

К квадратному изображению добавляется фоновое изображение, поэтому для его центрирования в контейнере вы можете использовать center для background-position в css (Примечание: вы можете использовать center только один раз, как это как сокращение для центрирования его по горизонтали и по вертикали):

.container-left .jacketd .coversvg {
  /* other rules */
  background: url("https://i.imgur.com/cZ8OKm5.png") no-repeat center;
}

Если вы хотите, чтобы изображение отображалось по центру внутри треугольника, вы можете изменить это на что-то вроде этого (30% от слева, по центру по вертикали), чтобы расположить его там, где вы хотите go:

  background: url("https://i.imgur.com/cZ8OKm5.png") 30% center;

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

.container-left .jacketd {
  position: relative;
  height: 606px;
  cursor: pointer;
  margin: 45px 0 0 0;
  border-radius: 25px;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.container-left .jacketd,
.container-left .wraph {
  background: url("https://i.imgur.com/EvDQJbO.png") no-repeat 0 0;
  background-size: 100% 200%;
}

.container-left .jacketd .coversvg {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  cursor: pointer;
  background: url("https://i.imgur.com/cZ8OKm5.png") no-repeat 35% center;
}

.container-left .jacketd .coversvg path {
  fill: none;
  stroke: #08f9ff;
  stroke-miterlimit: 10;
  stroke-width: 4px;
}

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

.container-left .jacketd .lines::after {
  left: 399px;
}

<div class="container-left">
  <div class="jacketd" title="OPEN">
    <svg class="coversvg" width="198" height="198" viewBox="0 0 47.96 51.66">
                <title>Open</title>
                <path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
              </svg>
    <div class="lines"></div>
  </div>
</div>