Центрирование чувствительного круга SVG в контейнере

тестовая страница

Разметка:

<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

Ответы

Ответ 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>