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>

を翻訳回避するために、円の中心に回転中心を調整します