在容器中居中响应 svg 圆

Question

Test page

标记：

<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; }
}

正如您在测试页面中看到的那样，我正在尝试定位一个具有一定半径的响应圆，并且我希望它能够将自己定位在容器的中间，而不管容器的宽度如何。如果圆圈也适合容器的高度，那就更好了。

css translate 在g 元素上使用百分比似乎有问题，这使我无法只做translate(-50%, -50%)

---

这是我所拥有的一个非常简化的版本，因为在我的代码中它是一个圆环图，这就是为什么它有这个 rotate 转换它

Answer 1

如果您希望 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>

看到区别了吗？

参考Link 并附上教程和视频