Van de SVG-vormtags is het pad het krachtigst, en het beheersen van het pad is voldoende om veelvoorkomende tekenproblemen op te lossen.
Laten we eerst kijken naar het basisgebruik van de padtag:
<pad d="M100,100 L200,200 L200,400" fill="#333" streek="#000" />
De padtag definieert het pad via de eigenschap d, die de informatie uit een string definieert, en het pad kan ook worden gedefinieerd door de fill- en stroke-attributen om de fill en rand te definiëren.
De informatie van het d-attribuut is eigenlijk niet ingewikkeld; het bestaat uit letters en cijfers, cijfers stellen coördinatenpunten voor, en letters geven aan hoe deze coördinatenpunten met elkaar verbonden moeten worden. In het bovenstaande voorbeeld vertegenwoordigt M bijvoorbeeld het beginpunt en L een rechte lijnverbinding, dus de informatie van d kan als volgt worden geïnterpreteerd:
M100,100 -> begint bij het (100,100) coördinatenpunt
L200.200 -> Trek een rechte lijn van (100.100) tot (200.200).
L200.400 -> Trek een rechte lijn van (200.200) naar (200.400).
In het d-attribuut van de padtag zijn er in totaal 10 commando's die gebruikt kunnen worden, en de volgende 5 commando's zijn basis en relatief eenvoudig.
M beweegt naar (verplaatsTo) x,y startpuntcoördinaten
Z closepath verbindt het begin- en eindpunt van het pad in een rechte lijn
L lineTo: De huidige knoop is in een rechte lijn verbonden met de gespecificeerde (x,y) knoop
H horizontale lijn x houdt de y-coördinaat van het huidige punt constant, en de x-as beweegt naar x, waardoor een horizontale lijn ontstaat
V verticale lijn y houdt de x-coördinaten van het huidige punt onveranderd, en de y-as beweegt naar y, waardoor een verticale lijn ontstaat
M en L
Laten we naar een ander voorbeeld van M en L kijken
<pad d="M30,30 L170,30 L30,170 L170,170"></path>
Vanaf punt A (30, 30) wordt de rechte lijn getrokken naar punt B (170, 30), vervolgens recht naar punt C (30, 170), vervolgens rechtdoor naar punt D (170, 170), en vormt tenslotte een Z-vormig pad.
Vul-effect en Z
<pad d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="geel"></path>
Er zijn twee M's in deze padbeschrijving, dus in één pad verschijnen er twee relatief onafhankelijke paden, het eerste pad is hetzelfde als in het bovenstaande voorbeeld, namelijk Z-vormig.
Het tweede pad is een rechthoek met het Z-commando in de beschrijving, wat aangeeft dat het het begin en het einde van het pad verbindt.
Daarnaast definiëren we hier de fill-eigenschap voor het pad, en je ziet dat de fill van kracht wordt ongeacht of het pad gesloten is of niet.
H en V
Laten we tot slot eens kijken naar de twee commando's H en V, die eigenlijk de afkorting zijn van het L-commando wanneer de x- of y-as ongewijzigd blijft, dus de volgende twee uiteinden worden beschreven en het getekende beeld hetzelfde is.
<pad d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" fill="geel"></path>
<pad d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" fill="geel"></path>
|
Geplaatst op 14-08-2017 13:15:15
|
|
|
