clip-path의 조합으로 raphaeljs와 freetransform

Question

저는 Raphael과 Elberts FreeTransform Plugin을 사용하고 있습니다. 이것은 내가 시도한 것입니다. MyWork

회전 또는 변환 직후에 제대로 작동하지 않을 때까지 내 클립 경로가 작동합니다. 나는 경로의 경계 안에 직사각형을두고 싶습니다. 바깥으로 나가 자마자 사라져야합니다. 왜 내가 수동으로 clippath에 대한 Raphael 자바 스크립트를 사용하고 대답은, Raphael 클립 rect 만 지원합니다. 이 항목을 정리하려면 도움이 필요합니다.

사전

에서

감사 업데이트 : 1 My Work 2 나는 번역 사건에 대한하지만 여전히 모든 세트를 방해 회전 케이스에 해결한다.

Answer 1

새 g 태그 (그룹)를 만들고 모든 요소를 ​​해당 그룹으로 이동 한 다음 clip-path을 g 태그에 적용하면됩니다. 개별 elems에 적용되는 경우 ClipPath는 요소의 특성 인 transform을 인식하지 못합니다. 그래서 이것을 g에 싸야합니다.

It is applied Here

Answer 2

이 바이올린 나는 클립 문제를 시도 http://jsfiddle.net/UGukL/

을 확인하시기 바랍니다, 그것은 작동하지 않았다. 그래서 가면으로 일하기로 결정했습니다. 또한 나는 드래그하지만 번역 및 회전을위한 keept 버튼을 구현하지 않았습니다. 이제 마스킹이 회전 및 변환 모두에 대해 잘 작동합니다.