在容器中居中响应式SVG圆形

Question

在容器中居中响应式SVG圆形

6

测试页面

标记：

<svg viewBox="0 0 400 400"  preserveAspectRatio="xMinYMin meet">
    <g>
        <circle r="70" class="circle-back" />
    </g>
</svg>

CSS

.doughnutChart{
    text-align:center;
    padding:50% 1em 0;
    position: relative;
    overflow: hidden;

    > svg{
        position: absolute;
        top: 0;
        left:0; right:0;
        margin: auto;

        g{ transform:rotate(270deg) translate(-88px, 200px); }
    }

    circle{ fill: none; }
    .circle-back { stroke:#EEE; stroke-width: 5px; }
}

如您在测试页面中所见，我试图定位一个响应式圆圈，并希望它自动定位于容器的中心位置，无论容器的宽度如何。如果圆圈也能够适应容器的高度，那就更好了。

使用百分比在

- vsync

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

如果您希望SVG与圆形大小相同，则需要将视口设置为两倍半径，并确定中心点。

圆形以cx，cy为中心，半径为r。 cx、cy和r是元素的属性。

svg {
  height: 100px;
  border: 1px solid green;
}
circle {
  fill: none;
}
.circle-back {
  stroke: #EEE;
  stroke-width: 5px;
}

<svg viewBox="0 0 140 140" preserveAspectRatio="xMinYMin meet">
  <g>
    <circle r="70" cx="50%" cy="50%" class="circle-back" />
  </g>
</svg>

如果没有指定，cx和cy将默认为0,0（左上角），您需要确定圆的中心位置。

或者，您可以使用百分比半径来创建一个与视口大小无关的圆。

svg {
  height: 100px;
  border: 1px solid plum;
}
circle {
  fill: none;
}
.circle-back {
  stroke: #EEE;
  stroke-width: 5px;
}

<svg viewBox="0 0 140 140" preserveAspectRatio="xMinYMin meet">
  <g>
    <circle r="50%" cx="50%" cy="50%" class="circle-back" />
  </g>
</svg>

在你的原始代码中。

svg {
  height: 100px;
  border: 1px solid red;
}
circle {
  fill: none;
}
.circle-back {
  stroke: #EEE;
  stroke-width: 5px;
}

<svg viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet">
  <g>
    <circle r="70" cx="200" cy="200" class="circle-back" />
  </g>
</svg>

看到区别了吗？

参考链接，其中包含教程和视频。