Sök…
Introduktion
Vägar är det mest flexibla elementet i SVG. En väg är en serie kubiska eller kvadratiska Bezier-kurvor, anordnade i anslutna splines. En bana kan vara öppen eller stängd i en slinga, eller den kan vara komplex med flera underkomponenter. Om en sökväg inte är enkel är fyllningsregeln viktig för att bestämma vilka områden som finns inom eller utanför banan.
Sökvägar genereras normalt av automatiska redigerare. Vanligtvis används kvadratiska banor för teckensnitt och kubiska banor för illustrationer.
parametrar
| Attribut / parametrar | Beskrivning |
|---|---|
| d | Definierar en sekvens av ritningskommandon som skapar formen. t.ex. d = "M 50,60 L50,60". Kommandon med stora bokstäver anger absoluta koordinater. Kommandon med små bokstäver anger relativa koordinater. |
| (...) | Ritningskommandon |
| m / M | Flytta nuvarande ritningsposition till XY d = "M XY" |
| l / L | Rita en linje till X, Y d = "L XY" |
| v / V | Rita en vertikal linje till Y d = "V Y" |
| h / H | Rita en horisontell linje till X d = "H X" |
| a / A | Rita en båge till X, Y med en implicit radie av Rx och Ry och en rotation specificerad av X-axel-rotation. De stora båg- och svepflaggorna väljer vilka av de fyra möjliga bågarna som uppfyller dessa begränsningar som ska dras. d = "En Rx Ry X-axel-rotation (grader) storbågsflagga (0/1) svepflagga (0/1) X, Y". |
| q / Q | Rita kvadratisk bezierkurva till X, Y med kontrollpunkt X1Y1 d = "X1Y1 X Y" |
| t / T | Rita en koradratisk kvadratisk bezierkurva (kontrollpunkten beräknas som en reflektion av kontrollpunkten för föregående q / Q-ritningskommando genom det aktuella ritningsläget) |
| c / C | Rita en kubisk bezierkurva till X, Y med hjälp av kontrollpunkterna X1, Y1 och X2, Y2 d = "C X1Y1, X2Y2, XY" |
| s / S | Rita en korthet kubisk bezierkurva (den första kontrollpunkten beräknas som en återspegling av den andra kontrollpunkten i det föregående c / C-ritningskommandot genom det aktuella ritningsläget). |
| - z / Z | Stäng sökvägen genom att rita en linje för att starta sökvägen (eller banavsnitt om en annan z har använts tidigare) |
| (...) | (slutet på listan) |
| stiglängd | (Valfritt) Tillåter författaren att ange en nominell sökvägslängd som kommer att användas för kalibrering i andra beräkningar, till exempel för text längs en sökväg |
| Strokeparametrar | gemensamt för alla form- och ritningselement |
| stroke | Färg på stig |
| stroke-bredd | Stigbredd |
Anmärkningar
Detaljerad information om SVG path elementet kan hittas i W3C Recommendation för SVG .
Rita en diagonal blå linje med kommandot 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>
Resultat:
Rita en horisontell orange linje med kommandot H-ritning
<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>
Resultat:
Rita ett rött kors med hjälp av l (relativ linje) vägkommandon
<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>
Resultat:
Rita en vertikal grön linje med kommandot V-väg
<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>
Resultat:
Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow