SVG -Kreis erscheint nicht in HTML -CSS ⇐ HTML

[Anonymous]

Ich erstelle eine wirklich einfache Loader -Seite für meine Anwendung. Ich wollte einen Kreis verwenden, der sich dreht, und als ich ein Tutorial sah, habe ich die SVG- und Kreis -Tags verwendet. Hier ist der Code HTML: < /p>

Code: Select all

< /code>
Und hier ist in diesem Fall alle beteiligten 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>
Das einzige [url=viewtopic.php?t=20324]Problem[/url] mit all diesem Code ist, dass ich bei der Öffnung der Seite, ob alles funktioniert, eine leere Seite gibt. Also versuche ich zu inspizieren. Wenn ich im Browser den Code von SVG schwebe, zeigt er den Schatten eines Quadrats an, der sich dreht, aber wenn ich den Kreiscode schwebe, zeigt er einen Punkt mit der folgenden Beschriftung an: Kreis 0x0 

. Ich denke, dass es nicht richtig macht, oder ich blockiere es. Ich weiß es nicht wirklich. < /P>
Kann jemand helfen? Vielen Dank