SVG modeliai - CSS-gudrybės

Anonim

SVG elementas leidžia mums apibrėžti modelius mūsų SVG žymėjimo viduje ir naudoti tuos modelius kaip fill. Pagrindinis modelių procesas vyksta maždaug taip:

  • Apibrėžkite SVG vidų
  • Apibrėžkite figūros viduje esančias figūras
  • Naudokite figūras
  • Sukurkite naują figūrą ir užpildykite ją modeliu

Tai yra paprastų SVG formų, naudojamų kaip modeliai, kolekcija. Laikui bėgant šis sąrašas gali išaugti, tačiau idėja yra ne turėti išsamią kolekciją, o sintaksė yra patogi kaip atspirties taškas kuriant naujus ir įdomius modelius.

Šiuos rinkinius taip pat saugome „CodePen“.

Apskritimo raštas

 

Šaškių lentos raštas

 

Šešiakampis raštas

 

Kubo raštas

 

Ševrono raštas

 

Jei norite realiu laiku žaisti su skirtingais modelio atributais, kad pajustumėte, kaip veikia piešimas, pabandykite tai: