使用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>