How to scale svg path with respect to itself and not the svg origin
I have an svg for for human muscles and I just want to scale a muscle on hover, however the muscle moves away from the origin of the svg, making it move away from the cursor and flicker. Is there a way make each muscle muscle path scale not relative to the parent svg?
Here is the svg component
import * as React from "react";
type props = {
props: any;
};
const MuscleSVG = (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
xmlSpace="preserve"
className="h-full w-full object-cover"
viewBox="0 0 589 538"
id="7bP_svg__gen-by-synoptic-designer"
{...props}
>
<path
className="absolute bg-red-500 fill-cyan-500 ease-in duration-100 hover:[transform:scale(1.2)]"
d="m500 143 10 15 8 30-9-5-9-15zM441 177l-31 10 2 15 33 44-6-45zM452 177l31 10-2 15-33 44 6-43zM532 184l11 18 5 25 16 29-9-5-19-35-9-13zM520 193l-9-4 4 16 28 45 5 12 3-10zM361 184l-11 19-5 23-16 30 9-5 20-37 8-13zM373 193l8-4-3 15-27 44-6 13-4-9zM434 240l-34 21-1 24 4 17 37-11 5-15zM459 239l-10 36 3 15 37 12 4-16-1-25zM442 295h-8l-8 6 9 44 8-20 1-15zM451 294l9 2 8 6-10 43-7-19-2-16z"
/>
<path
className="bg-red-500 fill-green-500"
d="m397 293 5 17 13-8-3 22-2 35-12 19-1-27-3-13-1-23zM497 292l-5 17-13-7 4 25 2 32 11 19 1-25 3-13 2-24zM420 301l13 48-9 49-10-33 2-41zM474 301l4 25 2 40-10 32-9-48zM410 366l-8 14 6 17 9-9zM485 367l-8 22 9 8 6-17zM398 383l-2 16-9 29-2 31 4 10 7-9 3-31 5-21v-10zM417 394l-5 6-5 10-5 20-2 27 9 19 11-22 1-51zM477 394l-4 8 1 52 11 21 10-18-4-29-5-22zM495 383l4 19 8 25 2 32-5 9-5-7-4-33-6-27zM396 466h4l8 14-7 43-5-15-4-36zM493 466h5l4 6-4 35-4 15-7-41zM390 484l5 37-5 7-3-10zM504 482l-5 39 4 7 5-11z"
/>
</svg>
);
export default MuscleSVG;
import * as React from "react";
type props = {
props: any;
};
const MuscleSVG = (props: any) => (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
xmlSpace="preserve"
className="h-full w-full object-cover"
viewBox="0 0 589 538"
id="7bP_svg__gen-by-synoptic-designer"
{...props}
>
<path
className="absolute bg-red-500 fill-cyan-500 ease-in duration-100 hover:[transform:scale(1.2)]"
d="m500 143 10 15 8 30-9-5-9-15zM441 177l-31 10 2 15 33 44-6-45zM452 177l31 10-2 15-33 44 6-43zM532 184l11 18 5 25 16 29-9-5-19-35-9-13zM520 193l-9-4 4 16 28 45 5 12 3-10zM361 184l-11 19-5 23-16 30 9-5 20-37 8-13zM373 193l8-4-3 15-27 44-6 13-4-9zM434 240l-34 21-1 24 4 17 37-11 5-15zM459 239l-10 36 3 15 37 12 4-16-1-25zM442 295h-8l-8 6 9 44 8-20 1-15zM451 294l9 2 8 6-10 43-7-19-2-16z"
/>
<path
className="bg-red-500 fill-green-500"
d="m397 293 5 17 13-8-3 22-2 35-12 19-1-27-3-13-1-23zM497 292l-5 17-13-7 4 25 2 32 11 19 1-25 3-13 2-24zM420 301l13 48-9 49-10-33 2-41zM474 301l4 25 2 40-10 32-9-48zM410 366l-8 14 6 17 9-9zM485 367l-8 22 9 8 6-17zM398 383l-2 16-9 29-2 31 4 10 7-9 3-31 5-21v-10zM417 394l-5 6-5 10-5 20-2 27 9 19 11-22 1-51zM477 394l-4 8 1 52 11 21 10-18-4-29-5-22zM495 383l4 19 8 25 2 32-5 9-5-7-4-33-6-27zM396 466h4l8 14-7 43-5-15-4-36zM493 466h5l4 6-4 35-4 15-7-41zM390 484l5 37-5 7-3-10zM504 482l-5 39 4 7 5-11z"
/>
</svg>
);
export default MuscleSVG;
0 Replies