clipPath или клип-путь Internet Explorer

Question

Любая версия IE это круто... 11+ было бы достаточно...

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);
}

Сначала посмотрите в Chrome, чтобы увидеть, как он должен был отображаться... затем поразитесь прямоугольнику в IE.

Я пытаюсь заставить звезду обрезать с помощью CSS в четвертом / нижнем / последнем примере. Я открыт для изменения разметки, как этот пример: Internet Explorer и путь к клипам

Однако... Мне не повезло, пытаясь следовать примеру переполнения стека

Answer 1

Тот же codePen... Я изменил изображение SVG и использовал "CUTOUT", а затем применил это к псевдоэлементу::after.