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 中的矩形。

我试图在第四个/底部/最后一个示例中通过 CSS 剪辑星星。我愿意像这个例子一样更改标记：Internet Explorer and clip-path

但是......我没有运气尝试遵循堆栈溢出示例

4

1 回答 1

0

同样的codePen ...我更改了SVG图像并使用了“CUTOUT”，然后将其应用于伪元素::after。

于 2016-05-06T23:49:19.790 回答