使用 CSS 防止 SVG 文本旋转答案

【问题标题】：Prevent SVG Text rotation with CSS使用 CSS 防止 SVG 文本旋转
【发布时间】：2017-07-29 02:53:14
【问题描述】：

我创建了一个带有文本元素的 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>

【问题讨论】：

标签： html css svg

【解决方案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>

【讨论】：