18 styczeń 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

W34

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.


Kategorie: html, informatyka, _blog


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


Komentarze: (1)

wojtek, June 25, 2020 07:40 Skomentuj komentarz


https://editor.method.ac

Skomentuj notkę

Disclaimers :-) bo w stopce coś wyglądającego mądrze można napisać. Wszystkie powyższe notatki są moim © wymysłem i jako takie związane są ze mną. Ale są też materiały obce, które tu przechowuję lub cytuje ze względu na ich dobrą jakość, na inspiracje, bądź ilustracje prezentowanego lub omawianego tematu. Jeżeli coś narusza czyjeś prawa - proszę o sygnał abym mógł czym prędzej naprawić błąd i naruszeń zaniechać.