[解決済み】SVGオブジェクトの拡大縮小とミラーリング

質問

オブジェクトを現在のサイズの2倍に拡大・縮小した後、縦方向と横方向、またはその両方に反転させるには、どのようにすれば最も簡単でしょうか？

今のところ、幅と高さが2倍になるように"scale(2,2)"を設定することはできますが、縦に反転させるためにscale(-1, 1)を設定しても、同じ大きさに反転させることができません。

SVGオブジェクトをプログラムで作成し、エクスポートするためのフォーマットとしています。

どのように解決するのですか？

スケールとフリップの両方を適用するには、transformに両方を記述するだけです。

transform="scale(2,2) scale(-1,1)"

あるいは単純に値を組み合わせる。

transform="scale(-2,2)"

もちろん、負のスケールで発生する問題は、オブジェクトがSVGの原点（左上）を横切って反転してしまうため、ドキュメントの端から外れてしまう可能性があることです。 この問題を解決するには、translate を追加する必要があります。

例えば、100×100のドキュメントがあったとします。

<svg width="100" height="100">
    <polygon points="100,0,100,100,0,100"/>
</svg>

これを縦に反転させるには、こうします。

<polygon points="100,0,100,100,0,100" transform="scale(2,-2)"/>

そして、画面外の動きを修正するには、次のどちらかを行います。

(オプション1) フリップする前にマイナス方向にシフトする(画面上で反転するようにする)。

<polygon points="100,0,100,100,0,100" transform="scale(2,-2) translate(0,-100)"/>

(トランスフォームリストは右から左へと効果的に適用されるため、ここではトランスレートは2番目に記載されています）

(オプション2) あるいは、後から正に(スケーリングされたサイズだけ)シフトすることも可能です。

<polygon points="100,0,100,100,0,100" transform="translate(0,200) scale(-2,2)"/>

垂直フリップ、水平フリップ、両フリップのデモをご覧いただけます。

更新情報

画面上のどこかにある既存のオブジェクトを反転させる（位置を変える）。 まず、そのバウンディングボックスを決定します。 (minX, minY, maxX, maxY) または センターX,センターY を使えば、その代わりに、すでに知っていることができます。

そして、そのtransformの前に以下を追加します。

translate(<minX+maxX>,0) scale(-1, 1)   // for flip X
translate(0,<minY+maxY>) scale(1, -1)   // for flip Y

または、センターがある場合は

translate(<2 * centreX>,0) scale(-1, 1)   // for flip X

つまり、あなたの例では

<rect x="75" y="75" width="50" height="50"  transform="translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

は minX+maxX は200になる。そこで、水平方向に反転させるために、前置詞をつける。

translate(200,0) scale(-1, 1)

だから、最終的なオブジェクトはこうなる。

<rect x="75" y="75" width="50" height="50"  transform="translate(200,0) scale(-1, 1) translate(-100, -100) scale(2, 2) scale(1, 1) rotate(45, 100, 100)" />

デモはこちら