18 stycznia 2015 (niedziela), 16:27:27

Spotkanie z SVG w HTML5

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 
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>

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.

Spotkanie z SVG w HTML5

Efekt programowania w SVG

Kod zapisany w SVG

Kategorie: html, informatyka, _blog

Słowa kluczowe: svg, html, informatyka, grafika, html5

Komentarze: (1)

wojtek, June 25, 2020 07:40 Skomentuj komentarz