Вопросы Теги

Как я могу горизонтально центрировать SVG сгруппированный круг (два пути)?

Определите переменную как количество часов, затем вы можете: 

declare
  l_number_of_hours integer;
  ...
begin
 ...
 l_number_of_hours := 6;

 SELECT SYSTIMESTAMP + interval '1' HOUR * l_number_of_hours
   INTO est_close_date 
 FROM DUAL;
end;

Если вам нужна более тонкая детализация, используйте минуты: 

declare
  l_number_of_minutes integer;
  ...
begin
 ...
 l_number_of_minutes := 2 * 60 + 30;

 SELECT SYSTIMESTAMP + interval '1' minute * l_number_of_minutes
   INTO est_close_date 
 FROM DUAL;
end;
-1
задан Gijs 19 January 2019 в 15:35
поделиться

1 ответ

Проблема в width: 500% в вашем svg.

Ваш контейнер должен иметь значение width некоторого значения и margin-left & amp; margin-right из auto. Это обеспечит его центрирование.

Учитывая, что SVG не имеет своих собственных width или height, он масштабируется до 100% своего родительского контейнера.

Итак, позвольте контейнеру выполнить масштабирование, позвольте SVG масштабироваться по его контейнеру. 

body {
  background: #1c222e;
  padding: 30px;
}

.c-container {
  margin: 0 auto;
}

.c-container-500 {
  max-width: 500px;
}

.c-container-100 {
  max-width: 100px;
}
<div class="c-container c-container-500">
  <svg id="yeah" viewbox="0 0 100 100">
        <path id="bg" stroke-linecap="round" stroke-width="4" stroke="#212b37" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
        <path id="progress" stroke-linecap="round" stroke-width="4" stroke="#7bdccd" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
    </svg>
</div>

<div class="c-container c-container-100">
  <svg id="yeah" viewbox="0 0 100 100">
        <path id="bg" stroke-linecap="round" stroke-width="4" stroke="#212b37" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
        <path id="progress" stroke-linecap="round" stroke-width="4" stroke="#7bdccd" fill="none" d="M50 2 
           a 48 48 0 0 1 0 96 
           a 48 48 0 0 1 0 -96">
        </path>
    </svg>
</div>

Codepen

0
ответ дан ksav 19 January 2019 в 15:35
поделиться
Другие вопросы по тегам:

Похожие вопросы: