如何解决如何在svg中的此图上创建百分比?
我正在尝试在svg中开发此图表:
.circulo{
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
border: 35px solid pink;
position: absolute;
top: 10px;
left: 57px;
}
svg{
transform: rotate(180deg);
height: 162px;
}
circle{
stroke-dashoffset: 0 !important;
stroke-dasharray: 5;
r: 140;
cy: 0;
cx: 176;
stroke-width: 40px;
}
<svg width="360" height="360" xmlns="http://www.w3.org/2000/svg">
<circle r="89.85699" cy="50" cx="50" stroke-width="50" stroke="#69aff4" fill="none" style="stroke-dashoffset: 360;"></circle>
</svg>
但是我无法给出百分比。
我曾尝试使用笔划-dashoffset 和笔划-dasharray ,但不能。
我该怎么做?
解决方法
我设法用肖恩的想法解决了。老兄!
<svg class="svg2" width="360" height="360" xmlns="http://www.w3.org/2000/svg">
<circle class="circle2" r="140" cy="0" cx="176" stroke-width="50" stroke="red" fill="none" style="stroke-dashoffset: 360;"></circle>
</svg>
<svg class="svg1" width="360" height="360" xmlns="http://www.w3.org/2000/svg">
<circle class="circle1" r="140" cy="0" cx="176" stroke-width="50" stroke="white" fill="none" style="stroke-dashoffset: 360;"></circle>
</svg>
.svg1{
transform: rotate(180deg);
height: 162px;
}
.circle1{
stroke-dashoffset: 0 !important;
stroke-dasharray: 5;
stroke-width: 40px;
}
.svg2{
transform: rotate(180deg);
height: 162px;
position: absolute;
z-index: -1;
}
.circle2{
stroke-dashoffset: 90 !important;
stroke-dasharray: 440;
stroke-width: 38px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。