
キーポイント
- SVGには、
viewBox
属性に基づいて定義された独自の座標系があり、任意のサイズにスケーリングできます。これにより、特にレスポンシブデザインでは、カーソルの位置に従ってSVG要素を追加することが複雑になります。
HTMLページに埋め込まれた- SVGはDOMの一部になり、他の要素と同様に操作できます。これにより、座標系間の変換を完全に回避できます。
- domからSVG座標への変換は、
getBoundingClientRect()
メソッドで位置とサイズを抽出することで実現できます。ただし、SVGからDOM座標への変換はより困難であり、SVG独自のマトリックス分解メカニズムを使用する必要があります。
- SVGまたは個々の要素は、翻訳、スケーリング、回転、および/または傾斜によって変換され、最終的なSVG座標に影響します。すべての変換を考慮して、
.getScreenCTM()
メソッドを任意の要素とSVG自体に適用できます。