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) または centerX,centerY を使うことができます。

そして、その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)" />

デモはこちら