So implementieren Sie die Koordinatensystemtransformation in SVG (mit Code)

Dieser Artikel stellt Ihnen eine Zusammenfassung der verschiedenen Methoden zur Verwendung von SVG in React vor (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Konvertierung des kartesischen Koordinatensystems

Wenn andere Systeme Daten in SVG übertragen, müssen Sie sich möglicherweise damit befassen Die Verwendung kartesischer Koordinaten stellt Vektorgrafiken von Daten dar. Punkt (0, 0) befindet sich in der unteren linken Ecke der Leinwand und die y-Koordinate steigt nach oben. Die y-Achse ist „entgegengesetzt“ zur Standardkonvention von SVG, daher müssen die Koordinaten neu berechnet werden.

Das folgende Beispiel:

<svg width="200px" height="200px" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0, 100) scale(1, -1)">
    <line x1="0" y1="0" x2="100" y2="0" style="stroke: black" />
    <line x1="0" y1="0" x2="0" y2="100" style="stroke: black" />
    
    <polygin points="40 40, 100 40, 70 70, 40 70" style="fill: grey; stroke: black" />
  </g>
<svg>

SVG-Transformation

translate(x, y): Verschieben Sie das Benutzerkoordinatensystem um die angegebenen x- und y-Werte
scale(xFactor, yFactor): Multiplizieren Sie alle Benutzerkoordinatensysteme mit dem angegebenen xFactor und yFactor. Der Skalierungswert kann ein Dezimalwert oder ein negativer Wert sein.
scale(factor): Identisch mit Scale(xFactor, yFactor)
rotate(angle): Drehen Sie die Benutzerkoordinaten entsprechend dem angegebenen Winkel. Das Rotationszentrum ist der Ursprung (0, 0). Im Standardkoordinatensystem erhöht sich der Drehwinkel im Uhrzeigersinn und der Winkel der horizontalen Linie beträgt 0 Grad
rotate(angle, centerX, centerY): Drehen Sie die Benutzerkoordinaten entsprechend dem angegebenen Winkel. Das Rotationszentrum wird durch centerX und centerY angegeben
skewX(angle): Alle x-Koordinaten entsprechend dem angegebenen Winkel neigen. Optisch erscheint die vertikale Linie dadurch in einem Winkel
skewY(angle): Alle Y-Koordinaten entsprechend dem angegebenen Winkel neigen. Optisch gesehen wird dadurch die horizontale Linie in einem Winkel angezeigt

Empfohlene verwandte Artikel:

Die Rolle des SVG-Pfads: So verwenden Sie den SVG-Pfad in der Webentwicklung

Zusammenfassung verschiedener Methoden zur Verwendung von SVG in React (mit Code)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Koordinatensystemtransformation in SVG (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!