Bagaimanakah saya boleh mencipta bentuk bintang yang diisi separa dengan SVG?

Mencipta dan Mengisi Separa Bentuk Bintang dengan SVG

Untuk mencipta strok di bahagian luar bintang, anda harus mengubah strok- harta linecap. Berikut ialah versi kod anda yang dikemas kini:

<br><svg height="210" width="500"><br> <polygon points="100,10 40,198 190 ,78 10,78 160,198" stroke-linecap="round"></svg><br>

Sekarang, mari kita isi sebahagian bentuk bintang. Anda boleh menggunakan penapis CSS untuk mencapai kesan ini. Penapis yang dipanggil "fillpartial" boleh ditakrifkan seperti berikut:

<feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />
<feOffset dy="0.5">
  <animate attributeName="dy" from="1" to=".5" dur="3s" />
</feOffset>
<feComposite operator="in" in2="SourceGraphic" />
<feComposite operator="over" in2="SourceGraphic" /></p>
<p></filter><br></defs><br>

Kemudian, anda boleh menggunakan penapis ini pada bentuk bintang anda seperti ini :

Ini akan menghasilkan bentuk bintang yang diisi sehingga titik separuh jalan, menghasilkan kesan separuh terisi. Anda boleh mengubah suai nilai warna henti dan nilai kelegapan henti bagi elemen untuk menukar warna dan ketelusan kawasan yang diisi.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mencipta bentuk bintang yang diisi separa dengan SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!