SVG <path>

SVG Διαδρομή - <path>

<path> Ο στοιχείο χρησιμοποιείται για να ορίσει τη διαδρομή.

Οι παρακάτω εντολές μπορούν να χρησιμοποιηθούν για δεδομένα διαδρομής:

  • M = μετακίνηση (moveto)
  • L = γραμμή (lineto)
  • H = οριζόντια γραμμή (horizontal lineto)
  • V = οριζόντια γραμμή (vertical lineto)
  • C = καμπύλη (curveto)
  • S = ομαλή καμπύλη (smooth curveto)
  • Q = διπλή Βέζιερ καμπύλη (quadratic Bézier curve)
  • T = ομαλή διπλή Βέζιερ καμπύλη (smooth quadratic Bézier curveto)
  • A = αλύπητη καμπύλη (elliptical Arc)
  • Z = κλείσιμο διαδρομής (closepath)

Σημείωση: Όλες οι παραπάνω εντολές μπορούν επίσης να γράφονται με μικρά γράμματα. Τα μεγάλα γράμματα αντιπροσωπεύουν αμετάβλητη τοποθεσία, ενώ τα μικρά γράμματα αντιπροσωπεύουν σχετική τοποθεσία.

Παράδειγμα 1

Ο παρακάτω παράδειγμα ορίζει μια διαδρομή, η οποία ξεκινά από την τοποθεσία 150,0 και στη συνέχεια σχεδιάζει μια γραμμή προς την τοποθεσία 75,200, μετά από đó σχεδιάζει μια γραμμή προς την τοποθεσία 225,200 και τελικά κλείνει τη διαδρομή πίσω στην τοποθεσία 150,0.

Αυτό είναι κώδικας SVG:

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Βέζιερ καμπύλες (Bézier curves) χρησιμοποιούνται για το μοντέλο ομαλών καμπυλών που μπορούν να κλιμακωθούν άμεσα. Τυπικά, ο χρήστης επιλέγει δύο άκρα και ένα ή δύο σημεία ελέγχου. Η Βέζιερ καμπύλη με ένα σημείο ελέγχου ονομάζεται διπλή Βέζιερ καμπύλη (quadratic Bézier curve), ενώ η Βέζιερ καμπύλη με δύο σημεία ελέγχου ονομάζεται τριπλή Βέζιερ καμπύλη (cubic).

Η παρακάτω παράδειγμα δημιουργεί μια καμπύλη δευτεροβάθμιας τάξης, όπου A και C είναι η αρχή και το τέλος, και B είναι ο έλεγχος σημείο:

A B C

Αυτό είναι κώδικας SVG:

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- 标记相关的点 -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- 给点添加标签 -->
  <g font-size="30" font-family="sans-serif" fill="black" stroke="none"
  text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

Δοκιμάστε το προσωπικά

Πολύ περίπλοκο; Ναι！！！Η απόδοση του διαδρόμου είναι πολύ περίπλοκη, συνιστάται να χρησιμοποιηθεί ένας επεξεργαστής SVG για τη δημιουργία σύνθετων γραφημάτων.