SVGで座標系変換を実装する方法（コード付き）

この記事では、React で svg を使用するさまざまな方法をまとめて紹介します (コード付き)。必要な方は参考にしていただければ幸いです。

デカルト座標系の変換

データを SVG に転送する他のシステムがある場合は、データを表すためにデカルト座標を使用するベクトル グラフィックスを処理する必要がある場合があります。点 (0, 0) はキャンバスの左下隅にあり、y 座標は上に向かって増加します。 Y 軸は SVG のデフォルトの規則とは「反対」であるため、座標を再計算する必要があります。

次の例:

<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 Transform

translate(x, y): 指定された x および y 値に従ってユーザー座標系を移動します
scale(xFactor, yFactor): を使用します指定された xFactor および yFactor すべてのユーザー座標系を乗算します。スケール値は小数または負の値です。
scale(factor):scale(xFactor, yFactor) と同じです。
rotate(angle): 指定された角度に従ってユーザー座標を回転します。回転の中心は原点(0,0)となります。デフォルトの座標系では、回転角度は時計回りに増加し、水平線の角度は 0 度です
rotate(angle, centerX, centerY): 指定された角度に従ってユーザー座標を回転します。回転の中心は、centerX と centerY で指定されます
skewX(angle): 指定された角度に従って、すべての X 座標を傾けます。視覚的には、これにより垂直線が斜めに見えます
skewY(angle): 指定された角度に従ってすべての y 座標を傾けます。視覚的に言うと、水平線が斜めに表示されます

おすすめ関連記事:

svgパスの役割:Web開発におけるsvgパスの使い方

reactでsvgを使う様々な方法のまとめ(コード添付)

以上がSVGで座標系変換を実装する方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。