防止使用CSS的SVG文本旋转 [英] Prevent SVG Text rotation with CSS

问题描述

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

  .progress {webkit-transform：rotate（-90deg）; transform：旋转（-90deg）; } .progress__value {stroke-dasharray：339.292; stroke-dashoffset：339.292;}  

< div class = 演示 > < svg class =progresswidth =100pxheight =100pxviewBox =0 0 120 120>< text x =44class =countery =66fill =＃ 262626style =font-weight：700; font-size：16px;> 30％< / text> < circle cx =60cy =60r =54fill =nonestroke =＃DDDDDDstroke-width =12/> < circle class =progress__valuecx =60cy =60r =54fill =nonestroke =＃262626stroke-width =12/> < / svg>< / div>

解决方案

旋转它们

创建一个围绕您要旋转的元素的组。 >将旋转中心调整到圆心以避免翻译它

.inner {transform-origin：60px 60px; transform：rotate（-90deg）;}。progress__value {stroke-dasharray：339.292; stroke-dashoffset：339.292;}

< div class = 演示 > < svg class =progresswidth =100pxheight =100pxviewBox =0 0 120 120> < text x =44class =countery =66fill =＃262626style =font-weight：700; font-size：16px;> 30％< / text> < g class =inner> < circle cx =60cy =60r =54fill =nonestroke =＃DDDDDDstroke-width =12/> < circle class =progress__valuecx =60cy =60r =54fill =nonestroke =＃262626stroke-width =12/> < / g取代; < / svg>< / div>

I created an SVG circle with text element inside. I want to rotate SVG with the CSS transform but I don't want text element rotate.

.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>

解决方案

Create a group around the elements that you want to rotate.

rotate them

Adjust the rotation center to the center of the circle to avoid translating it

.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>

这篇关于防止使用CSS的SVG文本旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！