我创建了一个 SVG 圆圈，里面有文本元素。我想使用 CSS 变换旋转 SVG，但我不想旋转文本元素。
.progress {
webkit-transform: rotate(-90deg);
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>
<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>最佳答案
围绕要旋转的元素创建一个组。
旋转它们
将旋转中心调整到圆心以避免平移
.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>关于html - 使用 CSS 防止 SVG 文本旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45380389/