Html 在容器中对中圆 标记： 正如你在测试页面中看到的，我试图用一个半径来定位一个响应圆，并且我希望它能在容器的中间定位它，而不管容器的宽度。如果圆也适合容器的高度，那就更好了

css

translate

在

g

元素上使用百分比似乎有问题，这会阻止我只执行

translate（-50%，-50%）

---

---

这是一个非常简化的版本，因为在我的代码中它是一个甜甜圈图，这就是为什么它有这个

旋转
转换到它如果你想要SVG是圆的大小，你需要将viewbox设置为半径的两倍并确定一个中心点

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


svg{
高度：100px；
边框：1px纯绿色；
}
圈{
填充：无；
}
.回圈{
冲程：#EEE；
笔画宽度：5px；
}

嘿。对不起，这不正是我需要的。首先，我有一个笔划，而不是填充，其次，当我将你所说的应用到演示页面时，它根本不起作用。请你看看原因好吗请注意，
g
是旋转的。将您的类添加到示例中，它显然可以工作…至少在Chrome中是这样。您使用的浏览器是3的哪个实现。
<svg viewBox="0 0 400 400"  preserveAspectRatio="xMinYMin meet">
    <g>
        <circle r="70" class="circle-back" />
    </g>
</svg>

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