Ta własność definiuje ścieżkę.
zwyczaj
Atrybuty definicji ścieżki kategorii
wartość
Zmienność Tak.
Dokumentacja specyfikacji SVG 1.1 (2. wydanie)
Własność d to w rzeczywistości ciąg zawierający szereg opisów ścieżek. Ścieżki te składają się z następujących instrukcji:
- Przejdź do
- Lineto
- Curveto
- Arcto
- ClosePath
Są one łączone w sznurek. Te różne komendy są rozróżniane na wielka litera; Polecenie wielkimi literami oznacza, że jego parametry to pozycje bezwzględne, natomiast polecenia małymi literami wskazują punkt względem aktualnej pozycji. Wartość ujemna może być określona jako parametr dla polecenia: ujemny kąt będzie przeciwny do ruchu wskazówek zegara, a absolutne pozycje x i y będą traktowane jako współrzędne ujemne. Ujemna względna wartość x przesuwa się w lewo, natomiast ujemna względna wartość y przesuwa się w górę.
Przejdź do
Polecenie Moveto można traktować jak podniesienie długopisu i lądowanie w innym miejscu. Nie ma wyznaczonego odcinka linii pomiędzy poprzednim punktem a tym określonym punktem. Dobrym pomysłem jest rozpoczęcie ścieżki za pomocą polecenia Moveto, ponieważ bez zainicjalizowanego Moveto punkt początkowy będzie tam, gdzie wykonano poprzednią operację, co może prowadzić do nieokreślonego zachowania.
Składnia:
M, x, y, tutaj x i y są współrzędnymi bezwzględnymi, reprezentującymi odpowiednio współrzędne poziome i pionowe.
m dx, dy tutaj dx i dy to odległości względem punktu bieżącego, odpowiednio w prawo i w dół.
Przykład:
W pozycji bezwzględnej x=50, y= 100:<ścieżka d="M50,100..." />
Przesuń się 50 w prawo, 100 w dół: <ścieżka d="m50,100..." />
Lineto
W przeciwieństwie do komendy Moveto, komenda Lineto narysuje prosty segment. Ten odcinek linii prostej przechodzi z bieżącej pozycji do wyznaczonej pozycji. Składnia natywnego polecenia Lineto to "L x, y" lub "l dx, dy", gdzie x i y to współrzędne bezwzględne, a dx i dy to odległości odpowiednio w prawo i w dół. Są też litery H i V, które określają odpowiednio ruchy poziome i pionowe. Mają tę samą składnię co L, a ich wersja mała to odległość względna, a wielka to pozycja absolutna.
Curveto
Polecenie Curvto określa krzywą Béziera. Istnieją dwa typy krzywych Béziera: sześcienna i kwadratowa. Kwadratowa krzywa Béziera to specjalna sześcienna krzywa Béziera, w której oba końce punktu kontrolnego są takie same. Składnia kwadratowej krzywej Béziera to "Q cx, cy x, y" lub "q dcx, dcy dx, dy". Cx i Cy to współrzędne bezwzględne punktów kontrolnych, natomiast DCX i DCY to odległości punktów kontrolnych odpowiednio w kierunku X i Y.
Sześcienna krzywa Béziera opiera się na tej samej koncepcji co kwadratowa krzywa Béziera, ale musi uwzględnić dwa punkty kontrolne. Składnia sześciennej krzywej Béziera to: "C c1x, c1y c2x, c2y x, y" lub "c dc1x, dc1y dc2x, dc2y dx, dy", gdzie c1x, c1y i c2x, c2y to współrzędne absolutne punktów kontrolnych punktu startowego i końcowego, odpowiednio. DC1X, DC1Y i DC2X, DC2Y są względne względem punktu startowego, a nie punktu końcowego. DX i DY to odległości odpowiednio w prawo i w dół.
Aby łączyć gładkie krzywe Béziera, można także użyć poleceń T i S. Ich składnia jest prostsza niż w innych komendach Curveto, ponieważ zakłada, że pierwszy punkt kontrolny odzwierciedla poprzedni punkt kontrolny na poprzednim lub że faktycznie jest punktem poprzednim, jeśli nie ma poprzedniego punktu kontrolnego. Składnia T to "T x,y" lub "t dx,dy", co odpowiada odpowiednio współrzędnym bezwzględnym i odległościom względnym, i służy do stworzenia kwadratowej krzywej Béziera. S służy do stworzenia sześciennej krzywej Béziera, składnia to "S cx, cy x, y" lub "s dcx, dcy dx, dy", gdzie (d)cx określa drugi punkt kontrolny.
Wreszcie, wszystkie polecenia krzywej Béziera mogą utworzyć wielostronny graf Béziera, najpierw zainicjować polecenie, a następnie wielokrotnie określić wszystkie parametry, tworząc wielostronny graf Béziera. Dlatego następujące dwa polecenia mogą tworzyć dokładnie tę samą ścieżkę:
Arcto
Czasami prostsze jest opisanie ścieżki łukowej eliptycznej niż ścieżki krzywej Béziera. Ostatecznie element ścieżki obsługuje komendę Arcto. Środek łuku jest obliczany na podstawie innych zmiennych. Deklaracja arcto to stosunkowo trochę powtórzenie Visual Studio: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Rozkładając ją, rx i ry to promienie odpowiednio w kierunku x i y, a wartość LargeArcFlag wynosi 0 lub 1, aby określić, czy narysować mały łuk (0) czy duży (1). SweepFlag jest również równy 0 lub 1, co służy do określenia, czy łuk jest zgodny z ruchem wskazówek zegara (1) czy przeciwnie (0). x i y to współrzędne miejsca docelowego. Chociaż xAxisRotate obsługuje zmianę orientacji osi x względem aktualnego układu odniesienia, ten parametr nie wydaje się mieć dużego wpływu w Gecko 7.
ClosePath
Polecenie ClosePath po prostu narysuje prostą linię od bieżącego punktu do pierwszego punktu na bieżącej ścieżce. To najprostsze polecenie i nie zawiera żadnych parametrów. Podąża najkrótszą liniową ścieżką do punktu początkowego, a jeśli inne ścieżki znajdują się na tej ścieżce, możliwe ścieżki się przecinają. Składnia to "Z" lub "z", a obie metody zapisu pełnią tę samą funkcję.
Element
Następujące elementy mogą korzystać z atrybutu d:
Te same zasady można stosować <animate>do ścieżek animacji.
Przypomnienie
Początek (układ współrzędnych 0,0 punktów) często znajduje się w lewym górnym rogu kontekstu. Jednak <glyph>źródło tego elementu znajduje się w lewym dolnym rogu skrzynki na listy.
Przecinek jest dozwolony między dowolnymi dwoma liczbami, ale nigdzie indziej.
przykład
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" enable-background="new 0 0 50 50" xml:space="preserve">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Aby pokazać, co d="M37,17v15H14V17H37z M50,0H0v50h50V0z", omówmy każdy podpunkt tego ciągu.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Ta własność zawiera ciągi znaków tworzących cały SVG.
M37,17
M to skrót od MoveTo. Wielka litera "M" oznacza współrzędne bezwzględne, a mała "m" oznacza względną odległość. Oznacza to, że opiera się na współrzędnych startowych, linia znajduje się wewnątrz ramki, a zaczynasz w prawym górnym rogu prostokąta wewnątrz ramki.
37 to skrót od początkowej pozycji svg, wynoszącej 37 pikseli na osi X.
17 Rozpocznij pozycję svg, na 17 pikseli na osi y.
v15
V oznacza pionowo. Wielka litera V oznacza współrzędne bezwzględne, a mała V oznacza względną długość i odległość. dx/dy i x/y mogą być używane w odpowiadających pozycjach H/V i h/v.
Tutaj jest przedstawiony jako rysowanie pionowej linii o długości 15 pikseli względem danej współrzędnej. Oznacza to, że rysujesz 15 pikseli do współrzędnych 37,32.
H14
H oznacza poziom, czyli współrzędne absolutne, ponieważ jest pisane wielką literą.
Od końca v15 rysuj linię poziomą aż do osiągnięcia współrzędnej bezwzględnej 14, a zakończ rysowanie linii, gdy osiągnie współrzędną x 14. Uderzenia znajdują się na współrzędnych 14,32.
V17
Tak jak wcześniej, zacznij od końca poprzedniej linii i rysuj pionową linię, aż osiągniesz współrzędną osi y 17. Uderzenia znajdują się na współrzędnych 14,17.
H37
Na koniec, zaczynając od 14,17, rysuj poziomą linię, aż osiągniesz współrzędną osi x 37. Kreska znajduje się na współrzędnych 37,17 (wartość M)
z
Zarówno małe, jak i wielkie Z zamykają serię segmentów SVG.
,
Przecinek rozpoczyna kolejny ciąg prostych segmentów grafiki wektorowej. Następna seria prostych odcinków wektorowych stworzy zewnętrzną ramkę.
M50,0
Zacznij od osi x 50 i osi y 0.
H0
Narysuj prostą linię aż do (0,0).
v50
Narysuj pionową linię o rozmiarze 0,0 piksela względem 50. Ta linia zostanie narysowana do (0,50).
H50
Narysuj poziomą linię o długości 50 pikseli względem (0,-50). Ta linia zostanie narysowana w prawo do (50,50).
V0
Narysuj pionową linię, aż osiągniesz współrzędną osi y 0. To narysuje linię do (50,0), która jest wartością M.
z
Zarówno małe, jak i wielkie Z zamykają serię segmentów SVG.
Dołącz kod:
Na koniec załączono link do dokumentu: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Opublikowano 04.05.2018 11:29:47
|
|
|
|
