How to roatate svg element without affecting the text inside it

user_8001892 0
Viewed 74

Rotate the SVG to start the loader animation from top. but, it rotates the text inside it.How to rotate only the SVG path together not to affect the text inside it.

tried to add the rotate individually to path. IN that case, both the path not aligned as circle 

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

Expected : Roatate the SVG to start the loader from top not affecting the text Actual: SVG loader starts from 3`o clock position and text aligned correctly

svg css html
1 Answers

The text is not affected by the rotation. I'm rotating the <path class="meter" by using:

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

This means I'm rotating the path 90 degs backwards. The center of rotation is: x:56.69720697402954, y:57.07850170135498

The center of rotation is the center of the svg path. To get the values I'm using javascript: first I get the bounding box of the path:

let bb = thePath.getBBox();

next I'm using the bounding box to calculate the center;

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>

Alternatively you may choose to rotate the svg element -90degand then rotate the text back:

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