1

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 の四角形に驚嘆してください。

4番目/下/最後の例で、CSSを介してスターをクリップさせようとしています。次の例のように、マークアップを変更しても構いません: Internet Explorer と clip-path

しかし...スタックオーバーフローの例に従おうとしてもうまくいきませんでした

4

1 に答える 1

0

Same codePen... I changed the SVG image and used a "CUTOUT" and then applied that to the pseudoelement ::after.

于 2016-05-06T23:49:19.790 に答える