0

我有一个 SVG 路径，无论窗口宽度如何变化（就像 #liquids 中的背景 img 一样），我都希望在 SVG 视图中水平居中。我还没有找到解决办法。。

.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 很陌生，如果我在这里遗漏了明显的内容，请原谅我。

4

1 回答 1

2

不要像你正在做的那样让 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>

于 2019-10-23T09:47:20.707 回答