2014-05-20 4 views
0

SVG 요소와 그 안에 경로를 만들었습니다. 직사각형이 아니며 불규칙한 모양입니다. 이제는 사용자가 드래그 할 수있는 이미지를 추가해야하고 path 요소 내에 있어야합니다. 그래서, 나는 그것을하기 위해 채우기를 사용했습니다.회전 할 때 SVG 이미지 요소가 잘립니다.

일부 변환을 추가하여 요소를 회전하면 가장자리가 잘리지 않습니다.

<svg id="magic"> 
    <pattern id="logo" patternUnits="userSpaceOnUse" height="900" width="900"> 
     <image xlink:href="libs/streetview/img/blank.png" transform="rotate(90,40,20)" /> 
    </pattern> 
    <path class="classic" d="M4,79 A85,82,0,0,1,94,8 L94,282 4,283 Z" fill="url(#logo)" /> 
</svg> 

PS : 900분의 900이 반복 패턴은 사용자의 뷰포트 내에서 너무 멀리와 있지 않은지 확인합니다 것을 채우기, 그것을 반복하는 동안 나는 하나의 이미지를 원했기 때문에 900분의 900이라고.

+0

문제를 재현하는 [jsFiddle] (http://jsfiddle.net)을 첨부하는 것이 좋습니다. – Itay

답변

0

당신이 그리는 캔버스처럼 <pattern>을 생각해보십시오. 상단 왼쪽 가장자리에서 회전 된 이미지의 모든 부분이 잘립니다.

대신 <clipPath>을 사용하시기 바랍니다. 이미지를 마음 속의 콘텐츠로 회전시킬 수 있습니다.

관련 문제