SVG
Ścieżki
Szukaj…
Wprowadzenie
Ścieżki są najbardziej elastycznym elementem SVG. Ścieżka to szereg sześciennych lub kwadratowych krzywych Beziera, ułożonych w połączone splajny. Ścieżka może być otwarta lub zamknięta w pętlę lub może być złożona z kilku podskładników. Jeśli ścieżka nie jest prosta, reguła wypełnienia jest ważna przy podejmowaniu decyzji, które obszary znajdują się wewnątrz lub na zewnątrz ścieżki.
Ścieżki zwykle są generowane przez automatyczne edytory. Zazwyczaj do czcionek używane są ścieżki kwadratowe, a do ilustracji - ścieżki sześcienne.
Parametry
| Atrybuty / parametry | Opis |
|---|---|
| re | Definiuje sekwencję poleceń rysowania tworzących kształt. np. d = „M 50,60 L50,60”. Polecenia rysowania dużymi literami oznaczają współrzędne absolutne. Polecenia rysowania małymi literami oznaczają współrzędne względne. |
| (...) | Polecenia do rysowania |
| m / M | Przesuń bieżącą pozycję rysowania na XY d = „M XY” |
| l / l | Narysuj linię do X, Y d = „L XY” |
| v / V | Narysuj linię pionową do Y d = „V Y” |
| h / H | Narysuj linię poziomą do X d = „H X” |
| a / A | Narysuj łuk do X, Y z domyślnym promieniem Rx i Ry i obrotem określonym przez obrót osi X. Duże łuku i flagi zamiatania wybierają, który z 4 możliwych łuków spełniających te ograniczenia powinien zostać narysowany. d = "A Rx Ry Obrót osi X (stopnie) flaga dużego łuku (0/1) flaga zamiatania (0/1) X, Y". |
| q / Q | Narysuj kwadratową krzywą Beziera do X, Y, używając punktu kontrolnego X1Y1 d = „X1Y1 X Y” |
| t / T | Narysuj stenograficzną krzywą kwadratową Béziera (punkt kontrolny jest obliczany jako odbicie punktu kontrolnego poprzedniego polecenia rysowania q / Q przez bieżącą pozycję rysowania) |
| c / C | Narysuj sześcienną krzywą Beziera do X, Y, używając punktów kontrolnych X1, Y1 i X2, Y2 d = "C X1Y1, X2Y2, XY" |
| s / S | Narysuj stenograficzną sześcienną krzywą Béziera (pierwszy punkt kontrolny jest obliczany jako odbicie drugiego punktu kontrolnego poprzedniego polecenia rysunkowego C / C przez bieżącą pozycję rysowania). |
| - z / Z | Zamknij ścieżkę, rysując linię na początku ścieżki (lub odcinek ścieżki, jeśli wcześniej użyto innego z) |
| (...) | (koniec listy) |
| długość ścieżki | (Opcjonalnie) Pozwala autorowi określić nominalną długość ścieżki, która będzie używana do kalibracji w innych obliczeniach, na przykład dla tekstu wzdłuż ścieżki |
| Parametry skoku | wspólne dla wszystkich elementów kształtu i rysunku |
| uderzenie | Kolor ścieżki |
| szerokość skoku | Szerokość ścieżki |
Uwagi
Szczegółowe informacje na temat elementu path SVG można znaleźć w Zaleceniu W3C dla SVG .
Narysuj ukośną niebieską linię za pomocą polecenia Ścieżka L.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
Wynik:
Narysuj poziomą pomarańczową linię za pomocą polecenia rysowania H.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
Wynik:
Narysuj czerwony krzyż za pomocą poleceń ścieżki l (linia względna)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
Wynik:
Narysuj pionową zieloną linię za pomocą polecenia Ścieżka V.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
Wynik:
Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow