ścieżka SVG
SVG ścieżka - <path>
<Path> służy do zdefiniowania ścieżki.
Poniższe polecenie może być użyty do danych trasy:
- M = moveTo
- L = lineTo
- H = lineTo pozioma
- V = lineTo pionowa
- C = curveTo
- S = gładki curveTo
- Q = krzywej Béziera drugiego stopnia
- T = gładką kwadratowego Beziera curveTo
- A = Łuk eliptyczny
- Z = closePath
Uwaga: Wszystkie powyższe polecenia pozwalają małe litery. Capital stanowi pozycjonowanie bezwzględne, względne położenie wskazuje małymi literami.
Przykład 1
Powyższy przykład definiuje ścieżkę, która zaczyna się w pozycji 1500, osiągnął pozycję 75200, a następnie stamtąd do 225 200 w 1500 roku i ostatecznie zamknięta ścieżka.
Oto kod SVG:
Przykłady
<Ścieżka d = "M150 0 L75 200 L225 200 Z" />
</ Svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Przykład 2
Korzystanie z krzywej Beziera modelu gładka krzywa, która może być skalowane w nieskończoność. W normalnych warunkach użytkownik wybiera jeden lub dwa punkty końcowe i dwa punkty kontrolne. Punkt kontrolny krzywej Beziera, która jest wywoływana krzywej Béziera drugiego stopnia i dwa punkty kontrolne są nazywane kostki.
Poniższy przykład tworzy kwadratowe krzywe Beziera, A i C są takie Punkty początkowe i końcowe, B to punkt kontrolny:
Oto kod SVG:
Przykłady
<Path id = "lineAB" d = "M 100 350 l 150 -300" skok = "red"
stroke-width = "3" wypełnić = "none" />
<Path id = "lineBC" d = "M 250 50 L 150 300" skok = "red"
stroke-width = "3" wypełnić = "none" />
<Ścieżka d = "M 175 200 l 150 0" skok = "green" stroke-width = "3"
wypełnić = "none" />
<Ścieżka d = "M 100 350 Q 150 -300 300 0" skok = "blue"
stroke-width = "5" wypełnić = "none" />
<! - Jako istotne punkty ->
<G skok = "black" stroke-width = "3" wypełnić = "black">
<Koło id = "pointa" cx = "100" cy = "350" r = "3" />
<Koło id = "pointB" cx = "250" cy = "50" r = "3" />
<Koło id = "pointC" cx = "400" cy = "350" r = "3" />
</ G>
<! - Wytwórnia punkty ->
<G font-size = czcionka "30" = "sans-serif" wypełnić = "black" udar = "none"
text-anchor = "middle">
<Tekst x = "100" y = "350" dx = "- 30"> A </ text>
<Tekst x = "250" y = "50" DY = "- 10"> B </ text>
<Tekst x = "400" y = "350" dx = "30"> C </ text>
</ G>
</ Svg>
Spróbuj »
Dla użytkowników przeglądarki Opera widoku pliku SVG (kliknij prawym przyciskiem myszy na grafice źródłem podgląd SVG).
Skomplikowane? Tak! ! Ponieważ podczas rysowania złożoność ścieżki, jest wysoce zalecane, aby użyć edytora SVG do tworzenia złożonej grafiki.