エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
SVG周りの座標変換まとめ - Qiita
座標変換を理解するために、次のようなDOM構造を考えます。 (複雑さを排除するため、x と y(または wi... 座標変換を理解するために、次のようなDOM構造を考えます。 (複雑さを排除するため、x と y(または width と height)は同じ値にしています) export function Component() { return ( <div style={{ margin: 100 }}> <svg width={200} height={200} viewBox="0 0 400 400"> <g transform="translate(100, 100)"></g> </svg> </div> ); } このDOM構造には、いくつかの座標系が存在します。 これら座標系間の変換にはどの行列を使えば良いかについては、次の図を見ることでわかります。 (図の数値は x 座標を表します) 例 たとえば、座標系 D の点 (150, 150) を座標系 B の点に変換するときは、次のように実