SVG Circle не появляется в HTML CSS ⇐ CSS

[Anonymous]

Я создаю действительно простую страницу загрузчика для своего приложения. Я хотел использовать круг, который вращается, и, увидев учебник, я использовал теги SVG и Circle. Вот код html: < /p>

Код: Выделить всё

< /code>
И вот все вовлеченные CSS в этом случае: < /p>
.loader{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.svg{
width: 150px;
height: 150px;
animation: rotate 2s linear infinite;
}

@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

.svg circle{
background-color: red;
width: 1em;
height: 1em;
fill: var(--redwine);
stroke-width: 10;
stroke: var(--redwine);
stroke-linecap: round;
transform:translate(5px, 5px);
stroke-dasharray: 440;
stroke-dashoffset: 440;
animation: circular 4s linear infinite;
z-index: 100;
}

@keyframes circular{
0%, 100%{
stroke-dashoffset: 440;
}
50%{
stroke-dashoffset: 0;
}
50.1%{
stroke-dashoffset: 880;
}
}
< /code>
Единственная проблема со всем этим кодом заключается в том, что всякий раз, когда я открываю страницу, чтобы увидеть, работает ли все, она дает мне пустую страницу. Поэтому я пытаюсь осмотреть. Когда я наведу в браузере код SVG, он показывает тень квадрата, которая вращается, но когда я наведу код круга, он показывает точку со следующей меткой: Circle 0x0 

. Я думаю, что это неправильно рендеринг, или я блокирую его. Я действительно не знаю. < /P>
может кто -нибудь помочь? Большое спасибо

Подробнее здесь: https://stackoverflow.com/questions/748 ... n-html-css