Question

我有一个显示svg圆圈的html文档。它不是真正的svg圆，但它是从两条路径构建的。见下文。另请参见https://codepen.io/anon/pen/xmomBg

问题：我想在浏览器winodw中将此对象居中。 StackFlow使用style="margin: 0 auto;"的变体提供了一些解决方案。但是，似乎只对某些（较简单的）svg图像有效。我使用的svg导致仅使圆的左侧居中，而不是使整个圆居中。 Codepen直观地显示了我的问题。

HTML

<div class="c-container" style="margin: 0 auto;">
  <svg id="yeah" viewbox="0 0 100 100">
    <path id="bg" stroke-linecap="round" stroke-width="4" stroke="#212b37" fill="none" d="M50 2 
       a 48 48 0 0 1 0 96 
       a 48 48 0 0 1 0 -96">
    </path>
    <path id="progress" stroke-linecap="round" stroke-width="4" stroke="#7bdccd" fill="none" d="M50 2 
       a 48 48 0 0 1 0 96 
       a 48 48 0 0 1 0 -96">
    </path>
  </svg>
</div>

CSS

body{
  background: #1c222e;
  padding: 30px;
}
.c-container {
  width: 100px;
  svg {
    width: 500%;
  }
}

Answer 1

问题出在您的svg上width: 500%。

您的容器应具有某个值的width，并且margin-left和margin-right为auto。这将确保它居中。

鉴于SVG没有自己的width或height，它将缩放到其父容器的100％。

因此，让容器进行缩放，允许SVG由其容器缩放。

body {
  background: #1c222e;
  padding: 30px;
}

.c-container {
  margin: 0 auto;
}

.c-container-500 {
  max-width: 500px;
}

.c-container-100 {
  max-width: 100px;
}

<div class="c-container c-container-500">
  <svg id="yeah" viewbox="0 0 100 100">
        <path id="bg" stroke-linecap="round" stroke-width="4" stroke="#212b37" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
        <path id="progress" stroke-linecap="round" stroke-width="4" stroke="#7bdccd" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
    </svg>
</div>

<div class="c-container c-container-100">
  <svg id="yeah" viewbox="0 0 100 100">
        <path id="bg" stroke-linecap="round" stroke-width="4" stroke="#212b37" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
        <path id="progress" stroke-linecap="round" stroke-width="4" stroke="#7bdccd" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
    </svg>
</div>

Codepen

如何将svg分组圆水平居中（两条路径）？

1 个答案: