[英]SVG circle not appearing in HTML CSS
I am creating a really simple loader page for my application.我正在为我的应用程序创建一个非常简单的加载器页面。 I wanted to use a circle, that rotates, and as I saw a tutorial, I used the SVG and circle tags.
我想使用一个旋转的圆圈,正如我看到的教程,我使用了 SVG 和 circle 标签。 Here is the code HTML:
这是代码 HTML:
<div className="loader">
<svg className="svg">
<circle cx="70" cy="70" height="100px" width="100px" />
</svg>
</div>
And here is all the involved CSS in this case:这是本例中所有涉及的 CSS:
.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;
}
}
The only problem with all this code is that whenever I open the page, to see if all is working, it gives me an empty page.所有这些代码的唯一问题是,每当我打开页面,查看是否一切正常时,它都会给我一个空白页面。 So I try to inspect.
所以我试着检查一下。 When I hover in the browser the code of SVG, it shows the shadow of a square that rotates, but when I hover the circle code, it shows a point with the following label:
circle 0x0
.当我在浏览器中悬停 SVG 的代码时,它会显示一个旋转的正方形的阴影,但是当我将鼠标悬停在圆形代码中时,它会显示一个带有以下标签的点:
circle 0x0
。 I think that it is not rendering correctly, or I am blocking it.我认为它没有正确呈现,或者我正在阻止它。 I don't really know.
我真的不知道。
Can someone help?有人可以帮忙吗? Thank you a lot
十分感谢
You are missing the radius attribute r
.您缺少半径属性
r
。
<circle cx="70" cy="70" r="25" height="100px" width="100px" />
See below:见下文:
.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; } }
<div className="loader"> <svg className="svg"> <circle cx="70" cy="70" r="25" height="100px" width="100px" /> </svg> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.