SVG 삼각형 클립에서 원으로 부드럽게 전환

Question

SVG를 사용하여 이미지를 삼각형으로 클립 경로로 이동합니다. 내 목표는 경로를 확장하고 마우스를 올리면 원이됩니다 (부드러운 전환).

내가 찾은 가장 가까운 사이트 - 챌린지에 대한 응답으로이 codepen입니다 : http://codepen.io/enjikaka/pen/hCGjE 그리고 그것은 확실히 전환,하지만 내가 뭘 클리핑는 매우 다른 것 같다. 나는 svg에 관해 매우 초심자이다. (단지 삼각형을 만들기 위해 그것을 사용하기 시작했다.) 여기

내 코드 (업 삼각형 클립 및 부트 스트랩 모두 삼각형 클립 아래 COL-SM-4 div의)입니다 :

<div class="col-sm-4"> 
       <div class='tri-up'> 
          <svg width="100%" height="100%" viewBox="0 0 100 87"> 
           <clipPath id="clipTriangleUp"> 
           <polygon points="0 87,100 87,50 0"/> 
           </clipPath> 
           <image clip-path="url(#clipTriangleUp)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/560x484"/> 
          </svg> 
         </div> 
        </a> 
       </div> 
       <div class="col-sm-4"> 
              <div class='tri-down'> 
          <svg width="100%" height="100%" viewBox="0 0 100 87"> 
           <clipPath id="clipTriangleDown"> 
           <polygon points="0 0,100 0,50 87"/> 
           </clipPath> 
           <image clip-path="url(#clipTriangleDown)" preserveAspectRatio="none" width="100%" height="100%" xlink:href="http://placehold.it/560x484"/> 
          </svg> 
         </div> 
        </a> 
       </div> 

이 내가 여기에있는 몇 가지 다른 클래스는, 그것은 6한다 삼각형, (위 아래로) 세 행의 두 행. 부정적 여백은 부트 스트랩 열보다 삼각형을 더 가깝게 밀어냅니다.

누구든지이 작업을 수행하는 방법을 알고 있다면 인터넷을 아무 쓸모없이 샅샅이 뒤졌으며 귀하의 도움은 대단히 감사하겠습니다.

Answer 1

아마도이 효과를 얻는 가장 간단한 방법 일 것입니다. 실제로는 clipPath보다는 마스크를 사용하고 있습니다. 우리는 삼각형을 마스크로 시작한 다음 삼각형과 동일한 크기가되도록 원 (마스크의 일부이기도 함)을 확대합니다.

애니메이션이 빠르면 가능한 한 잘 작동합니다. 더 느린 애니메이션을 원한다면 삼각형을 변형시키는 접근 방식을 사용하는 것이 좋습니다.

.tri-up 
 
{ 
 
    background-color: red; 
 
    width: 400px; 
 
    height: 400px; 
 
} 
 

 
.tri-up:hover svg .circmask 
 
{ 
 
    -webkit-transform: scale(2); 
 
    transform: scale(2); 
 
    -webkit-transition: -webkit-transform 0.1s; 
 
    transition: transform 0.1s; 
 
} 
 

 
.tri-up svg .circmask 
 
{ 
 
    -webkit-transform: scale(1); 
 
    transform: scale(1); 
 
    -webkit-transition: -webkit-transform 0.1s; 
 
    transition: transform 0.1s; 
 
}

<div class='tri-up'> 
 
    <svg width="100%" height="100%" viewBox="-100 -100 200 200"> 
 
     <mask id="clipTriangleUp"> 
 
      <polygon points="0,-100, 87,50, -87,50" fill="white"/> 
 
      <circle r="50" fill="white" class="circmask"/> 
 
     </mask> 
 
     <image mask="url(#clipTriangleUp)" 
 
       x="-100" y="-100" width="100%" height="100%" 
 
       xlink:href="http://placehold.it/400x400"/> 
 
    </svg> 
 
</div>