Tämä ominaisuus määrittelee polun.
käyttö
Kategoriapolun määrittelyominaisuudet
arvo
Vaihtelu Kyllä
Spesifikaatiodokumentaatio SVG 1.1 (2. painos)
Ominaisuus d on itse asiassa merkkijono, joka sisältää sarjan polkukuvauksia. Nämä reitit koostuvat seuraavista ohjeista:
- Moveto
- Lineto
- Curveto
- Arcto
- ClosePath
Nämä yhdistetään narulle. Nämä eri komennot ovat kirjainkoon herkkiä; Isot komennot osoittavat, että sen parametrit ovat absoluuttisia asemia, kun taas pienet komennot osoittavat pisteen suhteessa nykyiseen sijaintiin. Negatiivinen arvo voidaan määritellä komennon parametriksi: negatiivinen kulma on vastapäivään, ja absoluuttiset x- ja y-asemat katsotaan negatiivisiksi koordinaateiksi. Negatiivinen suhteellinen arvo x siirtyy vasemmalle, kun taas negatiivinen suhteellinen y nousee ylöspäin.
Moveto
Moveto-käskyä voi ajatella piirustuskynän nostamiseksi ja laskeutumiseksi toiseen paikkaan. Edellisen pisteen ja tämän määritellyn pisteen välille ei vedetä yhtään linjasegmenttiä. On hyvä idea aloittaa polku Moveto-komennolla, koska ilman alustettua Movetoa aloituspiste on siellä, missä edellinen operaatio tapahtui, mikä voi johtaa määrittelemättömään toimintaan.
Syntaksi:
M x,y tässä x ja y ovat absoluuttisia koordinaatteja, jotka edustavat vaakasuoria ja pystysuoria koordinaatteja.
m dx, dy tässä dx ja dy ovat etäisyydet suhteessa nykyiseen pisteeseen, oikealle ja alas, vastaavasti.
Esimerkki:
Absoluuttisessa asemassa x=50, y= 100:<polku d="M50,100..." />
Siirrä 50 oikealle, 100 alas: <polku d="m50,100..." />
Lineto
Toisin kuin Moveto-komento, Lineto-komento piirtää suoran segmentin. Tämä suora linja liikkuu nykyisestä sijainnista määriteltyyn kohtaan. Alkuperäisen Lineto-komennon syntaksi on "L x, y" tai "l dx, dy", missä x ja y ovat absoluuttisia koordinaatteja, ja dx ja dy ovat etäisyydet oikealle ja alas, vastaavasti. On myös kirjaimet H ja V, jotka osoittavat vaaka- ja pystysuorat liikkeet. Niillä on sama syntaksi kuin L:llä, ja niiden pieni versio tarkoittaa suhteellista etäisyyttä ja isot kirjaimet absoluuttista sijaintia.
Curveto
Curvto-komento määrittää Bézier-käyrän. Bézierin käyriä on kahta tyyppiä: kuutio- ja neliökäyriä. Kvadraattinen Bézier-käyrä on erityinen kuutioinen Bézier-käyrä, jossa ohjauspisteen kaksi päätä ovat samat. Kvadrattisen Bézier-käyrän syntaksi on "Q cx, cy x, y" tai "q dcx, dcy dx, dy". Cx ja Cy ovat molemmat ohjauspisteiden absoluuttisia koordinaatteja, kun taas DCX ja DCY ovat ohjauspisteiden etäisyyksiä X- ja Y-suunnissa.
Kuutioinen Bézier-käyrä noudattaa samaa käsitettä kuin kvadraattinen Bézierin käyrä, mutta sen täytyy ottaa huomioon kaksi kontrollipistettä. Kuutioisen Bézier-käyrän syntaksi on: "C c1x, c1y c2x, c2y x, y" tai "c dc1x, dc1y dc2x, dc2y dx, dy", missä c1x, c1y ja c2x, c2y ovat aloitus- ja päätepisteiden ohjauspisteiden absoluuttisia koordinaatteja. DC1X, DC1Y ja DC2X, DC2Y ovat suhteessa lähtöpisteeseen, eivät päätepisteeseen. DX ja DY ovat etäisyydet oikealle ja alas, vastaavasti.
Sileiden Bézier-käyrien yhdistämiseen voit myös käyttää T- ja S-komentoja. Niiden syntaksi on yksinkertaisempi kuin muissa Curveto-komennoissa, koska se olettaa, että ensimmäinen ohjauspiste heijastuu edellisestä ohjauspisteestä tai että se on itse asiassa edellinen piste, jos aiempaa ohjauspistettä ei ole. T:n syntaksi on "T x,y" tai "t dx,dy", joka vastaa absoluuttisia koordinaatteja ja suhteellisia etäisyyksiä, ja sitä käytetään kvadrattisen Bézier-käyrän luomiseen. S käytetään luomaan kuutioinen Bézier-käyrä, jonka syntaksi on "S cx, cy x, y" tai "s dcx, dcy dx, dy", missä (d)cx määrittää toisen kontrollipisteen.
Lopuksi kaikki Bézierin käyräkomennot voivat luoda monipuolisen Bézier-graafin, aloittaa komennon ja määrittää kaikki parametrit useaan kertaan luodakseen monipuolisen Bézier-graafin. Näin ollen seuraavat kaksi komentoa voivat luoda täsmälleen saman polun:
Arcto
Joskus on yksinkertaisempaa kuvata elliptinen kaarikäyräpolku kuin Bézierin käyräpolku. Lopulta polkuelementti tukee Arcto-komentoa. Kaaren keskipiste lasketaan muiden muuttujien avulla. Arcto-julistus on melko vähän toisto Visual Studiosta: "A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y". Purkamalla rx ja ry ovat säteet x- ja y-suunnissa, ja LargeArcFlagin arvo on 0 vai 1, jotta voidaan määrittää, piirretäänkö pieni kaari (0) vai suuri kaari (1). SweepFlag on myös joko 0 tai 1, jota käytetään määrittämään, onko kaari myötäpäivään (1) vai vastapäivään (0). x ja y ovat kohteen koordinaatit. Vaikka xAxisRotate tukee x-akselin orientaation muuttamista suhteessa nykyiseen viitekehykseen, tällä parametrilla ei näytä olevan suurta vaikutusta Gecko 7:ssä.
ClosePath
ClosePath-komento piirtää yksinkertaisesti suoran viivan nykyisestä pisteestä nykyisen polun ensimmäiseen pisteeseen. Se on yksinkertaisin komento eikä sisällä mitään parametreja. Se seuraa lyhintä lineaarista polkua aloituspisteeseen, ja jos muut reitit osuvat tälle polulle, mahdolliset polut leikkaavat. Syntaksi on "Z" tai "z", ja molemmilla kirjoitusmenetelmillä on sama tehtävä.
alkio
Seuraavat elementit voivat käyttää d-attribuuttia:
Samat säännöt pätevät <animate>animaatiopolkuihin.
Muistutus
Origo (koordinaatisto: 0,0 pistettä) on usein kontekstin vasen yläkulma. <glyph>Alkuaineen alkuperä löytyy kuitenkin sen kirjelaatikon vasemmasta alakulmasta.
Pilkku on sallittu kahden numeron välillä, mutta ei missään muualla.
esimerkki
<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="säilyttää">
<path fill="#F7931E" d="M37,17v15H14V17H37z M50,0H0v50h50V0z"/>
</svg>
Näyttääksemme, mitä d="M37,17v15H14V17H37z M50,0H0v50h50V0z" oikeastaan tarkoittaa, käydään läpi jokaista tämän merkkijonon alakappaletta.
d=" M37,17 || v15 || H14 || V17 || H37 || z // M50,0 || H0 || v50 || h50 || V0 || z"
d=
Tämä ominaisuus sisältää merkkijonot, jotka muodostavat koko SVG:n.
M37,17
M on lyhenne sanasta MoveTo. Isot "M" tarkoittavat absoluuttisia koordinaatteja, ja pieni "m" tarkoittaa suhteellista etäisyyttä. Se tarkoittaa, että se perustuu aloituskoordinaatteihin, viiva on laatikon sisällä ja aloitat suorakulmion oikeasta yläkulmasta laatikon sisällä.
37 on lyhenne lähtösvg-sijainnista, 37 pikselin kohdalla X-akselilla.
17 Aloita svg-asento, 17 pikselin kohdalla y-akselilla.
v15
V tarkoittaa pystysuoraa. Isokirjain V tarkoittaa absoluuttisia koordinaatteja, ja pieni V suhteellista pituutta ja etäisyyttä. dx/dy ja x/y voidaan käyttää vastaavissa H/V- ja h/v-asemissa.
Tässä se kuvataan piirtämässä pystysuoran viivan, jonka pituus on 15 pikseliä suhteessa tiettyyn koordinaattiin. Se tarkoittaa, että piirrät 15 pikseliä koordinaatteihin 37, 32.
H14
H tarkoittaa tasoa, eli absoluuttisia koordinaateja, koska se on isolla kirjattu.
V15:n lopusta piirretään vaakasuora viiva, kunnes absoluuttinen koordinaatti 14 saavutetaan, ja viivan piirtäminen päättyy, kun saavutetaan x-koordinaatti 14. Viivat sijaitsevat koordinaateissa 14, 32.
V17
Kuten ennenkin, aloita edellisen viivan päästä ja piirrä pystysuora viiva, kunnes saavutat y-akselin koordinaatin 17. Viivat sijaitsevat koordinaateissa 14, 17.
H37
Lopuksi, alkaen 14,17, piirrä vaakasuora viiva, kunnes saavutat x-akselin koordinaatin 37. Viiva sijaitsee koordinaateissa 37,17 (arvo M)
z
Sekä pienet että isot Z-kirjaimet sulkevat sarjan SVG-segmenttejä.
,
Pilkku aloittaa seuraavan yksinkertaisten vektorigraafisten segmenttien jonon. Seuraava sarja yksinkertaisia vektoriviivasegmenttejä muodostaa ulomman laatikon.
M50,0
Aloita x-akselilta 50 ja y-akselilta 0.
H0
Piirrä suora linja, kunnes (0,0).
v50
Piirrä pystysuora viiva 0,0 pikseliä suhteessa 50:een. Tämä viiva piirretään muotoon (0,50).
h50
Piirrä vaakasuora viiva 50 pikseliä suhteessa (0,-50). Tämä viiva vedetään oikealle (50,50).
V0
Piirrä pystysuora viiva, kunnes saavutat y-akselin koordinaatin 0. Tämä piirtää viivan arvoon (50,0), joka on arvo M.
z
Sekä pienet että isot Z-kirjaimet sulkevat sarjan SVG-segmenttejä.
Liitä koodi:
Lopuksi liitteenä on linkki dokumenttiin: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
|
Julkaistu 4.5.2018 11.29.47
|
|
|
|
