Inkscape SVG неправильно выровнен, когда положил в проект React+Vite и не будет вращаться вокруг шарнира ⇐ Javascript

[Anonymous]

Я делаю микрофюгельную трубку с двумя группами: кепкой и телом. Я использовал Inkscape для создания трубки для микрофуги, а затем запустил файл XML через чат GPT, чтобы получить упрощенную версию файла SVG. Однако, когда я импортирую его в свою программу, крышка не выровнена с телом, и крышка не вращается вокруг шарнира. Имея микрофюрговую трубку в черниле. Изображение трубки микрофуги в React+Vite. < /P>
Прикрепленная ниже - это способ его использования. По сути, я хочу, чтобы микрофугская трубка переключилась между двумя состояниями, одно с крышкой, а одно с крышкой. Но я просто не могу заставить кепку соответствовать телу, и это не так, как вращать ее вокруг конкретного шарнира. < /P>
export default function MicrofugeTube({ capOff = false }) {
return (

{/* Animated Cap */}

d="M84.8,151.7c0,3.06667,0,6.13333,0,9.2
c22.17767-0.0983,44.38367,0.0623,66.54365-0.1976
c3.18545-0.7008,6.3709-1.4016,9.55635-2.1024
c0.71378-3.61798-1.47148-4.71625-4.73651-4.87603
c-4.4144-1.35434-8.98911-1.38782-13.56349-1.42397
c-0.0333-6.13333-0.0667-12.26667-0.1-18.4
c-13.2-0.0667-26.4-0.13333-39.6-0.2
c0,6,0,12,0,18c-6.033333,0-12.066667,0-18.1,0z"
fill="#5b88b4"
fillOpacity={0.5}
/>

{/* Tube Body */}


);
}
< /code>
Я пытался изменить перевод (110, -10000), но нет заметного эффекта, даже когда я перехожу к крайностям. Я также пытался изменить Viewbox, но это ничего не делает, кроме как сделать его меньше или больше.


Подробнее здесь: https://stackoverflow.com/questions/797 ... ate-around