Latest web development tutorials

przykłady SVG

Proste przykłady SVG

Prosta grafika SVG przykład:

Tutaj jest plik SVG (zapisany z rozszerzeniem pliku SVG SVG):

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>

SVG analizy kodu:

Pierwszy wiersz zawiera deklarację XML. Zauważ, że nieruchomość wolnostojąca! Ten atrybut określa, czy plik SVG "stoi samotnie", albo zawiera odniesienie do pliku zewnętrznego.

standalone = "no" oznacza, że ​​dokument SVG ma odniesienie do pliku zewnętrznego - w tym przypadku, DTD.

Druga i trzecia linia odwołuje się do zewnętrznego SVG DTD. DTD znajduje się w "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". DTD znajduje W3C, zawierający wszystkie elementy dopuszczalnych SVG.

Kod SVG <svg> Start elementem, w tym toczenie <svg> tag i tag zamykający </ svg>. Jest to element główny. Szerokość i wysokość atrybuty można ustawić szerokość i wysokość tego dokumentu SVG. atrybut version określa wersję SVG używany, atrybut xmlns definiuje przestrzeń nazw SVG.

SVG <okrąg> służy do tworzenia okręgu. cx i cy atrybuty zdefiniować środek okręgu współrzędne x i y. Jeśli zignorujesz te dwie właściwości, a następnie kropka jest ustawiony na (0, 0). Atrybut R określa promień okręgu.

udar mózgu i udar szerokości atrybut kontroluje jak zarys kształtu. Mamy zarys kręgu jest ustawiona na 2px szerokie, czarne obramowanie.

wypełnić właściwość kolor jest ustawione w kształt. Ustawiamy kolor wypełnienia na czerwony.

Zamknięcie tag zamyka element SVG root, a sam dokument.

Uwaga: Wszystkie znaczniki otwierające muszą mieć tagów zamknięcia!