svg 그룹

의 번역과 함께 흔들어서 CSS 문제 나는 날개를 움직이기 위해 노력하고있어 벌을 가지고 있지만 어떤 이유로 그들은보기 상자의 맨 위로 번역됩니다. 흔들림 CSS를svg 그룹

display: inline-block; 
transform-origin: center center;

누구나 잘 알고 .. 내가이 문제라고 생각하지만 나도 몰라 처음에는

http://codepen.io/vannygee/pen/BpqVeX

여기 내 펜입니까?

출처

2017-02-09 van

SVG에 대한 GreenSock의 블로그 게시물에서보세요은 변환 :

https://greensock.com/svg-transforms 내가 기본적인 요점은 일부 브라우저의 변환 속성이 SVG의 뷰 박스보다는 타겟팅하는 요소/경로에 상대적인 것으로 믿습니다 . GSAP는이 문제를 보완하기 위해 변환을 행렬 변환으로 바꾸기 때문에 이에 대한 제 솔루션입니다.

출처

2017-02-09 16:47:54 Alejalapeno

고마워, 내가 볼게. 내 파일의 날개가 이상한 번역 (및 회전)을하는 것을 알 수 있습니다. 나는 스케치에서 파일을 회전 (수직 및 수평으로 뒤집 으면)하면 번역을 적용한다는 것을 인식하지 못했습니다. 아마도 처음부터 다시 만들게 될 것입니다. – van

당신이 옳은 것처럼 보입니다. 넓은 브라우저 지원이 필요하다면 GSAP을 살펴볼 것입니다. 그러나 그렇지 않으면 SVG에서 상속받은 변형이 문제인 것처럼 보입니다. – Alejalapeno

괜찮아요. 그래서 GSAP을 들여다 보았습니다. 내 svgs 결함인지 확인해 보았습니다.이게 얼마나 재미 있는지 확인해보십시오. http://codepen.io/vannygee/pen/bgmxeo – van

답변

관련 문제