html - 如何旋转 svg 元素而不影响其中的文本

Question

旋转 SVG 以从顶部开始加载程序动画。但是，它会旋转其中的文本。如何仅一起旋转 SVG 路径而不影响其中的文本。

尝试将旋转单独添加到路径中。在那种情况下，两个路径都没有对齐为圆

<svg class="loader" id="loader-svg" viewBox="0 0 115 115" data-value="66">

    <path class="bg" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1" />
    <path class="meter" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1" stroke-dasharray="316.6" stroke-dashoffset="316.6" />
   <text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">00:00</text>
</svg>

预期:旋转 SVG 以从顶部启动加载程序而不影响文本实际:SVG 加载器从 3`o 时钟位置开始，文本正确对齐

Answer 1

文本不受旋转影响。我正在旋转 <path class="meter"通过使用:

transform="rotate(-90,56.69720697402954,57.07850170135498 )"

这意味着我将路径向后旋转 90 度。旋转中心为:x:56.69720697402954, y:57.07850170135498

旋转的中心是svg路径的中心。要获取我使用 javascript 的值:首先我获取路径的边界框:

let bb = thePath.getBBox();

接下来我使用边界框来计算中心；

let center_x = bb.x + bb.width/2;
let center_y = bb.y + bb.height/2;

svg{border:1px solid; width:90vh;}

<svg class="loader" id="loader-svg" viewBox="0 0 115 115" data-value="66">

    <path class="bg" d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12; stroke:#ccc;stroke-opacity:1" />
    <path class="meter"  d="M 107.14216,57.078488 A 50.444955,50.444955 0 0 1 56.697203,107.52345 50.444955,50.444955 0 0 1 6.252247,57.078488 50.444955,50.444955 0 0 1 56.697203,6.633546 50.444955,50.444955 0 0 1 107.14216,57.078488 Z" style="fill:none;stroke-width:12;stroke-opacity:1;stroke:gold " stroke-dasharray="317" stroke-dashoffset="300" transform="rotate(-90,56.69720697402954,57.07850170135498 )" />
   <text x="50%" y="50%" id="progress-text" text-anchor="middle" dy=".3em">00:00</text>
</svg>

或者您可以选择旋转 svg 元素 -90deg然后将文本旋转回来:

#loader-svg{transform:rotate(-90deg);  transform-origin: 50% 50%;}
#progress-text{transform:rotate(90deg); transform-origin: 50% 50%;}