使用CSS防止SVG文本旋转

Question

我创建了一个带有文本元素的SVG圆。我想用CSS转换旋转SVG，但我不想旋转文本元素。

.progress { 
 
webkit-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
\t } 
 
.progress__value { 
 
    stroke-dasharray: 339.292; 
 
    stroke-dashoffset: 339.292; 
 
}

<div class="demo"> 
 
    <svg class="progress" width="100px" height="100px" viewBox="0 0 120 120"> 
 
<text x="44" class="counter" y="66" fill="#262626" style=" 
 
    font-weight: 700; font-size: 16px; 
 
">30%</text> 
 
     <circle cx="60" cy="60" r="54" fill="none" stroke="#DDDDDD" stroke-width="12" /> 
 
     <circle class="progress__value" cx="60" cy="60" r="54" fill="none" stroke="#262626" stroke-width="12" /> 
 
    </svg> 
 
</div>

Answer 1

创建要旋转的元素围绕着一组。

旋转它们

调整旋转中心到圆的中心，以避免翻译它

.inner { 
 
    transform-origin: 60px 60px; 
 
    transform: rotate(-90deg); 
 
} 
 
.progress__value { 
 
    stroke-dasharray: 339.292; 
 
    stroke-dashoffset: 339.292; 
 
}

<div class="demo"> 
 
    <svg class="progress" width="100px" height="100px" viewBox="0 0 120 120"> 
 
     <text x="44" class="counter" y="66" fill="#262626" style=" 
 
    font-weight: 700; font-size: 16px; 
 
">30%</text> 
 
     <g class="inner"> 
 
     <circle cx="60" cy="60" r="54" fill="none" stroke="#DDDDDD" stroke-width="12" /> 
 
     <circle class="progress__value" cx="60" cy="60" r="54" fill="none" stroke="#262626" stroke-width="12" /> 
 
     </g> 
 
    </svg> 
 
</div>