Internet Explorer의 이미지에서 클립 경로와 관련된 문제

이미지에 클립 경로를 적용하려고합니다. 오른쪽 아래 모서리가 삼각형으로 덮 이도록하고 싶습니다. 파이어 폭스, 크롬 및 사파리에서이 작업을 수행 할 수 있습니다. 하지만 Internet Explorer에서 제대로 작동하지 않는 것 같습니다. 집중적으로 검색 했음에도 불구하고 IE 용으로 이것을 구현하는 방법에 대한 명확한 답을 얻을 수없는 것 같습니다. 어떤 소식통은 이렇게 말합니다 (IE11에서 작동하는 것을 볼 수 있습니다) ... 다른 사람들은 그것이 not supported이라고 말합니다. 나를 혼란스럽게 만든다. 어쩌면 누군가가 다음 스타일의 코드 샘플과 SVG를 기반으로 나를 도울 수 있습니다. 미리 감사드립니다!Internet Explorer의 이미지에서 클립 경로와 관련된 문제

.clip { 
     -webkit-clip-path: polygon(0 0, 349px 0, 349px 128px, 297px 233px, 0 233px); 
     clip-path: url("#clipPolygon");  
    } 

    <svg width="349" height="233"> 
     <clipPath id="clipPolygon"> 
      <polygon points="0 0, 349 0, 349 128, 297 233, 0 233"></polygon> 
     </clipPath> 
    </svg>

출처

2014-11-25 tvgemert

CanIUse가 정상입니다. –

고마워, 알아. 이 예제를 가지고있는 링크도 가짜 이미지를 사용합니다. 나는 그것을 제거 할 것입니다. 자, 이것에 접근하는 다른 방법이 있습니까? – tvgemert

SVG에서이 모든 작업을 수행 한 적이 있습니까? IE에서 작동 할 수 있습니까? SVG는 편리한 요소를 가지고 있습니다. –

IE는 SVG <image> 요소에 클립 경로를 적용합니다. 그러나 HTML <img> 요소 나 배경 이미지 또는 다른 비 SVG 요소에 클립 경로를 적용하지는 않습니다.

사파리와 크롬은 현재 FWIW에서 동일한 제한 사항을 가지고 있지만 HTML 요소에서 작동하는 -webkit-clip-path를 지원합니다. 이것이 귀하의 예제가 작동하는 이유입니다.

Firefox는 SVG가 아닌 요소에서 클립 경로를 지원하므로 SVG 요소에서 작동합니다.

출처

2014-11-25 17:31:32

Internet Explorer의 이미지에서 클립 경로와 관련된 문제

답변

관련 문제