Zoeken…
Invoering
Paden zijn het meest flexibele element van SVG. Een pad is een reeks kubieke of kwadratische Bezier-krommen, gerangschikt in verbonden splines. Een pad kan open of gesloten zijn in een lus, of het kan complex zijn met verschillende subcomponenten. Als een pad niet eenvoudig is, is de vulregel belangrijk om te bepalen welke gebieden zich binnen of buiten het pad bevinden.
Paden worden normaal gesproken gegenereerd door automatische editors. Typisch worden kwadratische paden gebruikt voor lettertypen en kubieke paden voor illustraties.
parameters
| Attributen / parameters | Beschrijving |
|---|---|
| d | Definieert een reeks tekenopdrachten die de vorm maken. bijv. d = "M 50,60 L50,60". Hoofdopdrachten geven absolute coördinaten aan. Tekenopdrachten in kleine letters duiden relatieve coördinaten aan. |
| (...) | Opdrachten tekenen |
| m / M | Verplaats huidige tekenpositie naar XY d = "M XY" |
| l / l | Trek een lijn naar X, Y d = "L XY" |
| v / V | Trek een verticale lijn naar Y d = "V Y" |
| h / H | Trek een horizontale lijn naar X d = "H X" |
| a / A | Teken een boog naar X, Y met een geïmpliceerde straal van Rx en Ry en een rotatie gespecificeerd door X-as-rotatie. De grote boog- en veegvlaggen selecteren welke van de 4 mogelijke bogen die aan deze beperkingen voldoen, moet worden getekend. d = "Een Rx Ry X-as-rotatie (graden) grote boogvlag (0/1) zwaaienvlag (0/1) X, Y". |
| q / Q | Teken de kwadratische beziercurve naar X, Y met behulp van besturingspunt X1Y1 d = "X1Y1 X Y" |
| t / T | Teken een stenover kwadratische beziercurve (het besturingspunt wordt berekend als een weerspiegeling van het besturingspunt van het vorige q / Q tekencommando door de huidige tekenpositie) |
| c / C | Teken een kubische beziercurve naar X, Y met behulp van controlepunten X1, Y1 en X2, Y2 d = "C X1Y1, X2Y2, XY" |
| s / S | Teken een stencil kubieke beziercurve (eerste besturingspunt wordt berekend als een weerspiegeling van het tweede besturingspunt van het vorige c / C-tekencommando door de huidige tekenpositie). |
| - z / Z | Sluit het pad door een lijn te tekenen voor het begin van het pad (of het padgedeelte als eerder een andere z is gebruikt) |
| (...) | (einde van lijst) |
| pad lengte | (Optioneel) Hiermee kan de auteur een nominale padlengte opgeven die wordt gebruikt voor kalibratie in andere berekeningen, bijvoorbeeld voor tekst langs een pad |
| Slagparameters | gebruikelijk bij alle vorm- en tekenelementen |
| beroerte | Kleur van het pad |
| streekbreedte | Padbreedte |
Opmerkingen
Gedetailleerde informatie over het SVG- path is te vinden in de W3C-aanbeveling voor SVG .
Trek een diagonale blauwe lijn met de opdracht L path
<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>
Resultaat:
Trek een horizontale oranje lijn met behulp van de H-tekenopdracht
<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>
Resultaat:
Teken een rood kruis met behulp van l (relatieve lijn) padopdrachten
<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>
Resultaat:
Teken een verticale groene lijn met de opdracht V path
<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>
Resultaat:
Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow