グループ解除後、グループの変換を各要素に適用

Question

SVGエディタを最初から作成するプロジェクト（外部ライブラリを使用することはできません）に取り組んでいます。

私たちが管理していたシェイプをグループ化するツールを作成する必要があります。グループのすべてのツール（スケール/平行移動/回転）も使用できます。しかし、私たちはグループを解除しようとしています。私は2つのオプションのいずれかをグループ要素から変換を取って、各要素に何らかの形で適用するか、またはグループを変換して無視し、最初から各要素に変換を適用するかのいずれかだと思います。

誰もがこれに取り組んだり、役立つかもしれないスタートアイデアを持っていますか？変換は可換ではないので、たとえば、回転は各図形の異なる相対点の周りにあります。私たちはかなり固執しています。

Answer 1

トランスフォームはネストされた方法で動作します。したがって、グループ変換を解除して子に変換を適用するには、親グループの変換を子の変換に追加するだけです。

したがって、次の2 SVGsは等価です：あなたはSVG編集が何をするかで見ることができる

svg { 
 
    border: solid 1px blue; 
 
}

<svg> 
 
    <g transform="translate(100,30)"> 
 
    <rect width="100" height="80" transform="rotate(30, 50,40)"/> 
 
    </g> 
 
</svg> 
 

 
<br/> 
 

 
<svg> 
 
    <rect width="100" height="80" transform="translate(100,30) rotate(30, 50,40)"/> 
 
</svg>