Tato vlastnost definuje cestu.
zvyk
Atributy definice cesty podle kategorie
hodnota
Variabilita Ano
Specifikační dokumentace SVG 1.1 (2. vydání)
Vlastnost d je ve skutečnosti řetězec obsahující řadu popisů cest. Tyto cesty obsahují následující instrukce:
- Přesunout se
- Lineto
- Curveto
- Arcto
- ClosePath
Tyto jsou spojeny do řetězce. Tyto různé příkazy jsou citlivé na velká písmena; Příkaz velkým písmenem označuje, že jeho parametry jsou absolutní pozice, zatímco příkazy malými písmeny označují bod vzhledem k aktuální pozici. Zápornou hodnotu lze zadat jako parametr pro příkaz: záporný úhel bude proti směru hodinových ručiček a absolutní pozice x a y budou považovány za záporné souřadnice. Záporná relativní hodnota x se posune doleva, zatímco záporná relativní hodnota y se posune nahoru.
Přesunout se
Příkaz Moveto lze chápat jako zvednutí kreslícího pera a přistání na jiném místě. Mezi předchozím bodem a tímto určeným bodem není nakreslena žádná úsečka. Je dobré začít cestu příkazem Moveto, protože bez inicializovaného Moveto bude výchozím bodem místo, kde proběhla předchozí operace, což může vést k neurčitému chování.
Syntaxe:
M, x, y, zde x a y jsou absolutní souřadnice, které představují horizontální a vertikální souřadnice.
m dx, dy zde dx a dy jsou vzdálenosti vzhledem k aktuálnímu bodu, tedy doprava a dolů.
Příklad:
Na absolutní pozici x=50, y= 100:<path d="M50,100..." />
Posuňte se o 50 doprava, 100 dolů: <path d="m50,100..." />
Lineto
Na rozdíl od příkazu Moveto příkaz Lineto vykreslí přímý úsek. Tento úsek přímky se pohybuje z aktuální pozice do určené pozice. Syntaxe nativního příkazu Lineto je "L x, y" nebo "l dx, dy", kde x a y jsou absolutní souřadnice a dx a dy jsou vzdálenosti doprava a dolů. Jsou zde také písmena H a V, která označují horizontální a vertikální pohyby. Mají stejnou syntaxi jako L, jejich malá verze je relativní vzdálenost a velká verze je absolutní pozice.
Curveto
Příkaz Curvto specifikuje Bézierovu křivku. Existují dva typy Bézierových křivek: kubické a kvadratické. Kvadratická Bézierova křivka je speciální kubická Bézierova křivka, kde jsou oba konce řídicího bodu stejné. Syntaxe kvadratické Bézierovy křivky je "Q cx, cy x, y" nebo "q dcx, dcy dx, dy". Cx a Cy jsou obě absolutní souřadnice řídicích bodů, zatímco DCX a DCY jsou vzdálenosti řídicích bodů ve směru X a Y.
Kubická Bézierova křivka se řídí stejným konceptem jako kvadratická Bézierova křivka, ale musí zohlednit dva řídicí body. Syntaxe kubické Bézierovy křivky je: "C c1x, c1y c2x, c2y x, y" nebo "c dc1x, dc1y dc2x, dc2y dx, dy", kde c1x, c1y a c2x, c2y jsou absolutní souřadnice kontrolních bodů výchozího a koncového bodu. DC1X, DC1Y a DC2X, DC2Y jsou relativní k výchozímu bodu, nikoli k cílovému bodu. DX a DY jsou vzdálenosti doprava a dolů.
Pro propojení hladkých Bézierových křivek můžete také použít příkazy T a S. Jejich syntaxe je jednodušší než u ostatních příkazů Curveto, protože předpokládá, že první řídicí bod odráží předchozí kontrolní bod na předchozím, nebo že je to ve skutečnosti předchozí bod, pokud žádný předchozí kontrolní bod neexistuje. Syntaxe T je "T x,y" nebo "t dx,dy", což odpovídá absolutním souřadnicím a relativním vzdálenostem, a používá se k vytvoření kvadratické Bézierovy křivky. S se používá k vytvoření kubické Bézierovy křivky, syntaxe je "S cx, cy x, y" nebo "s dcx, dcy dx, dy", kde (d)cx určuje druhý řídicí bod.
Nakonec všechny příkazy Bézierovy křivky mohou vytvořit vícestranný Bézierův graf, nejprve inicializovat příkaz a poté několikrát zadat všechny parametry, čímž vznikne vícestranný Bézierův graf. Proto následující dva příkazy mohou vytvořit přesně stejnou cestu:
Arcto
Někdy je jednodušší popsat cestu eliptického oblouku než dráhu Bézierovy křivky. Na konci dne podporuje řetězec Arcto jako element cesty. Střed oblouku se počítá pomocí dalších proměnných. Arcto deklarace je relativně trochu opakováním Visual Studia: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Při rozkládání jsou rx a ry poloměry ve směru x a y, a hodnota LargeArcFlag je 0 nebo 1, aby se určilo, zda nakreslit malý oblouk (0) nebo velký oblouk (1). SweepFlag je také 0 nebo 1, což se používá k určení, zda je oblouk ve směru hodinových ručiček (1) nebo proti směru (0). x a y jsou souřadnice cíle. Ačkoliv xAxisRotate podporuje změnu orientace osy x vzhledem k aktuálnímu referenčnímu rámci, tento parametr se v Gecko 7 nezdá mít velký vliv.
ClosePath
Příkaz ClosePath jednoduše nakreslí přímku z aktuálního bodu do prvního bodu na aktuální cestě. Je to nejjednodušší příkaz a neobsahuje žádné parametry. Sleduje nejkratší lineární cestu k výchozímu bodu a pokud na této cestě padají jiné cesty, možné cesty se protínají. Syntaxe je "Z" nebo "z" a obě metody zápisu mají stejnou funkci.
prvek
Následující prvky mohou používat atribut d:
Stejná pravidla lze aplikovat <animate>i na animační cesty.
Připomínka
Počátek (souřadnicový systém 0,0 bodů) je často v levém horním rohu kontextu. <glyph>Nicméně původ prvku je v levém dolním rohu jeho poštovní schránky.
Mezi libovolnými dvěma čísly je povolena čárka, ale nikde jinde.
příklad
<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>
Abychom ukázali, co d="M37,17v15H14V17H37z M50,0H0v50h50V0z" vlastně znamená, pojďme si probrat každý pododstavec tohoto řetězce.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Tato vlastnost obsahuje řetězce, které tvoří celé SVG.
M37,17
M je zkratka pro MoveTo. Velké "M" znamená absolutní souřadnice a malé "m" znamená relativní vzdálenost. Naznačuje to, že je to založené na startových souřadnicích, čára je uvnitř rámečku a začínáte v pravém horním rohu obdélníku uvnitř rámečku.
37 je zkratka pro počáteční pozici svg, která je na ose X 37 pixelů.
17 Začněte pozici svg na 17 pixelech na ose y.
v15
V znamená vertikální. Velké V označuje absolutní souřadnice a malé V relativní délku a vzdálenost. dx/dy a x/y lze použít na odpovídajících pozicích H/V a h/v.
Zde je znázorněn jako vertikální čára o délce 15 pixelů vzhledem k dané souřadnici. Znamená to, že nakreslíte 15 pixelů na souřadnice 37,32.
H14
H znamená úroveň, což jsou absolutní souřadnice, protože je psáno s velkým písmenem.
Od konce v15 nakreslete vodorovnou čáru až do dosažení absolutní souřadnice 14 a ukončete kreslení, když dosáhne x-souřadnice 14. Tahy se nacházejí na souřadnicích 14,32.
V17
Stejně jako dříve začněte od konce předchozí čáry a nakreslete svislu čáru, dokud nedosáhnete souřadnice y 17. Tahy se nacházejí na souřadnicích 14,17.
H37
Nakonec, od 14,17, nakreslete vodorovnou čáru, dokud nedosáhnete souřadnice osy x 37. Tah se nachází na souřadnicích 37,17 (hodnota M)
z
Malé i velké Z uzavírají řadu segmentů SVG.
,
Čárka začíná další řetězec jednoduchých vektorových grafických segmentů. Další série jednoduchých vektorových úseček vytvoří vnější rámec.
M50,0
Začněte na ose x 50 a ose y 0.
H0
Nakreslit přímku až do (0,0).
V50
Nakreslit svislou čáru o velikosti 0,0 pixelů vzhledem k 50. Tato čára bude nakreslena na (0,50).
H50
Nakreslit vodorovnou čáru o velikosti 50 pixelů vzhledem k (0,-50). Tato čára bude nakreslena doprava na (50,50).
V0
Nakreslete svislu čáru, dokud nedosáhnete souřadnice y 0. Tím se nakreslí čára do (50,0), což je hodnota M.
z
Malé i velké Z uzavírají řadu segmentů SVG.
Přiložte kód:
Nakonec je připojen odkaz na dokument: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Zveřejněno 04.05.2018 11:29:47
|
|
|
|
