clip-path svg 폴리곤 인터넷 익스플로러

Question

이 코드는 작동하지 않습니다. 즉,지도의 한 지점을 따라 화살표를 만들어야하기 때문에이 코드를 사용해야합니다.

<div style="width:100%;height:100%;background:red;clip-path:url(#cliparrow);position:absolute;right:0px;top:0px; -webkit-clip-path:polygon(777px 285px,0px 303px, 777px 315px);"></div> 
<svg height="0" width="0" style="float:left;position:absolute;width:0;height:0;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <clipPath id="cliparrow"> 
      <polygon points="777,285 0,303 777,315" ></polygon> 
     </clipPath> 
    </defs> 
</svg> 

의견이 있으십니까? 감사

Answer 1

Internet Explorer가 하지 (현재) 호환HTML 요소 (can-i-use 참조)에 CSS를 통해 clip-path을 사용하여에 있습니다. clip-path은 현재 HTML에 대한 권장 후보이며 아직 사양에 나와 있지 않습니다 (http://www.w3.org/TR/css-masking-1/).

그러나 clip-path를 다른 SVG 요소의 SVG 특성으로 사용할 수 있습니다 (예 : clipping and masking in SVG에 MDN 페이지를로드하면 IE에서 작동 함).

HTML 콘텐츠 자체를 변형하지 않고 색상이 지정된 모양을 포함해야하는 경우 (예 : HTML 텍스트, 여러 요소 등에 대해 자르기 적용) 적절하게 모양이 지정된 SVG 요소를 사용하면됩니다 필요한 경우 투명 div에 직접 임베드 됨). 또한 브라우저 특정 웹킷 접두어가 필요하지 않습니다. (몇 가지 추가 도우미와)

<div> 
    <svg width="700px" height="700px" xmlns="http://www.w3.org/2000/svg"> 
     <polygon id="arrow" points="777,285 0,303 777,315" ></polygon> 
    </svg> 
</div> 

예를 들어 바이올린 : http://jsfiddle.net/taswyn/cv6m76m7/이

(당신은 분명히 높이를 설정하고이 그냥 빨리 예를 들어 당신의 모양을 사용했다 적절 폭해야 SVG CSS의 사용을합니다.

IE 9 및 10 브라우저 모드 (및 Chrome에서 테스트 됨)를 사용하여 IE 10에서 테스트되었습니다. 아마도 8 세 이하에서는 작동하지 않을 것입니다.

텍스트에 대해자를 필요가있는 경우 HTML 텍스트 요소 대신 SVG 텍스트를 사용해야합니다.

제외 : 직사각형으로 클립해야하는 경우 마스킹 모듈이 권장 상태에 도달하고 클립 경로를 사용할 수있게 될 때까지 브라우저 간 호환이 가능하지만 더 이상 사용되지 않는 clip CSS를 일시적으로 사용할 수 있습니다. HTML을 W3C 표준으로. (분명히 이것은 당신의 상황에는 적용되지 않지만 다른 사람에게 도움이 될 수 있습니다)