clipPath oder Clip-Pfad

Internet Explorer

Jede Version von IE ist cool ... 11+ würde ausreichen, um ...clipPath oder Clip-Pfad

http://codepen.io/dapinitial/pen/86857208c985a895aeea87cfd40a0b2e

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="0" width="0"> 
    <defs> 
    <clipPath id="star-filled"> 
     <path d="M19.2748284,22.7612409 L12.4158204,17.8468588 C12.4158204,17.8468588 6.75998969,22.0997022 5.4338696,22.7905777 C5.28255037,22.8693624 5.09900019,22.8501806 4.96708597,22.7421919 C4.8352382,22.6340041 4.78081112,22.4577841 4.82892493,22.2942412 L7.45159233,14.1703976 C6.59517993,13.4660485 1.76366367,10.1277572 0.566467321,9.06466249 C0.435882206,8.94844355 0.389629159,8.76452428 0.449704957,8.6006496 C0.510113034,8.43690762 0.664422771,8.32062232 0.839134357,8.322348 C1.68278729,8.33064465 8.71112398,8.32931717 9.2855656,8.322348 C9.90898487,6.93084021 11.563063,1.45481066 12.06972,0.259302028 C12.1387673,0.0964229361 12.3039092,-0.00645505586 12.4781556,0.00031497849 C12.6547944,0.00688589613 12.8089048,0.12244111 12.8648604,0.289966305 L15.404259,8.33628635 C16.4790443,8.3400696 20.1065193,8.3097372 20.9200679,8.3158435 C21.965945,8.32367548 23.0929643,8.32387461 23.9947659,8.31637447 C24.1787147,8.31770188 24.3369454,8.42874374 24.3977522,8.59527338 C24.4596887,8.76432515 24.4084515,8.95348792 24.2698253,9.06798112 L17.3740009,14.1672781 C17.702557,15.3990264 19.5760713,20.8973572 19.9322729,22.3102371 C19.9757348,22.482342 19.9070863,22.66354 19.7604854,22.7642277 C19.6869191,22.8147375 19.6017895,22.8392955 19.5166601,22.8386981 C19.4318628,22.8381671 19.3473313,22.8122817 19.2748284,22.7612409 L19.2748284,22.7612409 Z"></path> 
     </clipPath> 
    </defs> 
</svg> 

.reward { 
    @include shine($background-color: rgba(194,166,97,1), $glint-color: rgba(233, 221, 204, 1.0), $duration: .69s); 
    -webkit-clip-path: url(#star-filled); 
    -moz-clip-path: url(#star-filled); 
    -ms-clip-path: url(#star-filled); 
    -o-clip-path: url(#star-filled); 
    clip-path: url(#star-filled); 
    clip: url(#star-filled); 
    transform: translate(0,0); 
}

Erster Blick in Chrome zu sehen, wie es war soll angezeigt werden ... dann bestaunen Sie das Rechteck in IE.

Ich versuche, den Stern über CSS im vierten/untersten/letzten Beispiel zu clippen. Ich bin offen das Markup wie in diesem Beispiel auf sich ändernde: Internet Explorer and clip-path

aber ... Ich habe kein Glück hatte versucht, den Stack-Überlauf Beispiel

Quelle

2016-05-06 dapinitial

Clip ist eine andere Eigenschaft als Clip-Pfad und nimmt keine URL. Aber Ihr Hauptproblem besteht darin, dass IE nur das Setzen eines Clip-Pfads auf einem SVG-Element unterstützt, während Sie versuchen, einen Clip-Pfad auf ein HTML-Element zu setzen. –

Ich habe ein anderes SVG verwendet und es funktioniert IE9 + jetzt. Ich habe die Form ausgeschnitten, die ich sehen und benutzen wollte :: nach, um sie zu platzieren. Funktioniert wie erwartet. – dapinitial

Same codePen ... Ich änderte das SVG-Bild zu folgen und verwendet ein "CUTOUT" und dann das auf das Pseudoelement :: after angewendet.

Quelle

2016-05-06 23:49:19 dapinitial

Antwort

Verwandte Themen