clipPath或剪辑路径Internet Explorer



任何版本的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和剪辑路径

然而。。。我没有幸尝试遵循堆栈溢出示例

相同的代码笔。。。我更改了SVG图像并使用了"CUTOUT",然后将其应用于伪元素::after。

最新更新