相关疑难解决方法(0)

我正在玩SVG并且在定位方面遇到了一些问题.我有一系列形状,包含在g组标签中.我希望像容器一样使用它,所以我可以设置它的x位置,然后该组中的所有元素也会移动.但这似乎不可能.

1. 大多数人如何定位一组你希望同时移动的元素？
2. 有相对定位的概念吗？例如,相对于其父母

测试页

标记：

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

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

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

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