1
IEのすべてのバージョンはクールだ... 11+十分であろう...クリップ経路またはクリップパスのInternet Explorer
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 and clip-path
は、しかし...私は
クリップはクリップパスとは異なるプロパティであり、URLは取得されません。しかし、あなたの主な問題は、HTML要素にクリップパスを設定しようとしているのに対し、IEはSVG要素のクリップパスを設定することのみをサポートしていることです。 –
私は別のSVGを使用しました。IE9 +が動作しています。私は見たいと思っていた形状を切り取り、それを配置した。期待どおりに動作します。 – dapinitial