.pie{
border-radius:50%;
transform: rotate(-90deg);
}
.pie .background{
fill:none;
stroke:#eaeaea;
stroke-width:3;
stroke-dasharray:100.53 100.53;
}
.pie .chart{
fill:none;
stroke:#f73319;
stroke-width:3;
stroke-dasharray:0 100.53;
animation: 2s linear slice ;
animation-fill-mode:forwards;
}
.pie text{
font-size:6px;
transform: rotate(90deg);
transform-origin: 50% 50%;
}
@keyframes slice{
to{stroke-dasharray:75.39 100.53;}
}<body>
<svg viewBox="0 0 64 64" class="pie">
<circle class="background" r="25%" cx="50%" cy="50%">
</circle>
<circle class="chart" r="25%" cx="50%" cy="50%">
</circle>
<text x="32" y="32">
75%
</text>
</svg>
</body>我有一个 <text>我的 svg viewbox 中的字段。 View 框已旋转 -90deg ，但出于显而易见的原因，我希望将我的文本旋转回来。然而，似乎只有 Firefox 考虑到上述代码并旋转文本。其他浏览器不这样做的任何原因？我该如何正确地书写它才能使其旋转？
最佳答案
不需要先旋转整个SVG再旋转<text>回来补偿。只需旋转“图表”圆圈即可。
.pie .background {
fill:none;
stroke:#eaeaea;
stroke-width:3;
stroke-dasharray:100.53 100.53;
}
.pie .chart {
fill:none;
stroke:#f73319;
stroke-width:3;
stroke-dasharray:0 100.53;
animation: 2s linear slice ;
animation-fill-mode:forwards;
}
.pie text {
font-size:6px;
}
@keyframes slice {
to{stroke-dasharray:75.39 100.53;}
}<svg viewBox="0 0 64 64" class="pie">
<circle class="background" r="25%" cx="50%" cy="50%"/>
<circle class="chart" r="25%" cx="50%" cy="50%"
transform="rotate(-90 32 32)"/>
<text x="32" y="32">
75%
</text>
</svg>关于css - SVG View 框中的文本字段不旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38111776/