Skutek i przyczyna
Takie coś się namalowało z rana:
Takie coś się namalowało z rana:
Na Wikipedii jest narysowany taki obrazek. Czyste SVG, bo nawet animacje są robione poprzez CSS a nie JS. Rewelacja. Muszę to kiedyś przeanalizować ale pewnie nie przeanalizuję bo czasu mało i są ważniejsze rzeczy niż podziwianie zdolności ludzkich przy kreacji języków do porozumiewania się (wydawania rozkazów) maszynom.
Ciekawostki jakie tu znajduję:
- Obrazek jest wstawiony inline w HTML - dopiero od niedawna wiem, że tak można z wszelkimi plikami, nawet z dźwiękami. Fajnie.
- ten zegarek też jest w CSS, ale on nie wskazuje żadnego godziny, tylko się animuje :-)
Nie edytować TinyMCE
Kategorie:
programowanie / css, _blog
Słowa kluczowe:
svg,
css,
html5,
orbity,
satelity
Komentarze: (0)
Skomentuj notkę
Postawiłem sobie nie dawno programistyczne zadanie - narysować biały ekran a na nim zaświecić (albo wygasić) jeden piksel. Postawiłem je sobie aby nauczyć się w JavaScript walczyć z grafiką, ale skoro przeszedłem z blogiem na HTML5 to mogę coś pocudować w SVG.
No to próbuję.
Efekt programowania w SVG |
Kod zapisany w SVG<svg width="50px" height="50px" style="background-color: #aaa;" > |
No nie wiem, czy to można zaliczyć. Chyba nie.
Niestety, widać, że piksel zrobiony z kwadratu jest kwadratem, z koła kołem (nawet ma wypełnienie jak go powiększyć w przeglądarce, a z linii jest pikselem skierowanym w dół. Ale w SGV nie ma komendy punkt i to jest dziwne.
Niezaliczono!
Jeżeli powyżej nie widać czarnego kwadratu to niezaliczono!
Maluje żółtego DIV 100 na 100 a w nim niebieskiego 1 na 1 i zobaczymy:
Fajnie, ale jak namalować pixel? Ja chcę mieć na ekranie coś o rozmiarze 1px na 1px i nie wiem jak to zrobić!
Przechodzę z blogiem na HTML5 a więc będę mógł sobie grafikę SVG wkładać bezpośrednio w treść notek. Kiedyś musiałem osadzać obiekty a teraz - o proszę, otwiera się frazę <svg> i się pisze coś, aby mieć taki obrazek.
Efekt programowania w SVG |
Kod zapisany w SVG<svg |
Nie wiem jeszcze po co tak, ale próbuję. Stara notka o tym jak się to robiło w HTML 4 jest tu -> http://www.pp.org.pl/wojtek/?id=31260 i może zadziała a może nie.
No i jeszcze coś - jeszcze spróbuję z wzorami matematycznymi, bo to też jest fajne.
Kiedyś to były dane do osobnej strony, która używała SVG, bo dane musiały być w HTML 4.1 w osobnej stronie, więc .... Ale już blog przeszedł na HTML5 więc mogę sobie te graficzne dane wstawić w kod i będzie pięknie.
Pod obrazkiem jest kopia tego kodu:
W34
<svg width="350px" height="350px" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100" fill= "yellow" fill-opacity= "1" stroke= "gray" stroke-width= "2"/> <circle cx="100" cy="100" r="50" fill="darkblue" fill-opacity= "0.5" stroke="red" stroke-width="2"/> <line x1="100" y1="300" x2="300" y2="100" fill="darkblue" fill-opacity= "0.5" stroke="red" stroke-width="2"/> <path d="M97,246 C119,169 220,209 243,127 C291,27 281,223 419,271" fill="none" fill-opacity= "0.5" stroke="green" stroke-width="3"/> <rect x="50" y="180" width="300" height="200" fill= "#55ff55" fill-opacity= "0.5" stroke= "#228822" stroke-width= "1" rx="50" ry="100" /> <text style="fill:red; font-size:430%; font-family: arial; font-weight:bold;" x="310" y="350">W34</text> </svg>