Путь SVG остается в центре внутри div - PullRequest
Новая
       33

Путь SVG остается в центре внутри div

0 голосов
/ 23 октября 2019

У меня есть путь SVG, который я бы хотел центрировать по горизонтали в представлении SVG независимо от того, как изменяется ширина окна (как фон img в #liquids). Я пока не могу найти решение .. 

.container {
    width: 100%;
}

#liquids{
    background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg) no-repeat scroll center 0 transparent;
    width: 100vw;
    height: 100vh;
}
#p3 {
    fill: #0400ff;
}
<div class=container">
    <svg id="liquids">
        <g class="p3-g">
            <path id="p3" d="M 200 200 C 50 350 100 0 350 50 C 550 100 650 100 650 250 C 650 450 450 300 450 350 C 450 550 250 150 200 200 Z"/>
        </g>
    </svg>
</div>

Я совершенно новичок в SVG, простите меня, если я упускаю очевидное здесь.

1 Ответ

2 голосов
/ 23 октября 2019

Не делайте SVG большим, как вы, сохраняйте высоту / ширину, которые соответствуют его содержимому, уменьшая viewBox и считая max-width равным ширине изображения, тогда вы можете легко центрировать его, используя любую технику центрирования:

.container {
    width: 100%;
    background: url(http://24.media.tumblr.com/tumblr_lbi4ltLmYL1qb23z5o1_500.jpg) no-repeat top ;
    height: 100vh;
}
svg {
  display:block;
  max-width:500px;
  margin:auto;
  border:1px solid; /* to illustrate*/
}
#p3 {
    fill: #0400ff;
}

body {
  margin:0;
}
<div class="container">
    <svg id="liquids" viewBox="110 40 550 370">
        <g class="p3-g">
            <path id="p3" d="M 200 200 C 50 350 100 0 350 50 C 550 100 650 100 650 250 C 650 450 450 300 450 350 C 450 550 250 150 200 200 Z"/>
        </g>
    </svg>
</div>
...