Scale and mirror SVG object

Solution 1:

To apply both scale and flip, just list both in your transform:

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

Or simply combine the values:

transform="scale(-2,2)"

Of course, the issue you have with negative scales is that the objects get flipped across the origin (top left) of the SVG, so they can go off the edge of the document. You need to correct this by adding a translate as well.

So, for example, imagine we had a document that is 100×100.

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

To flip this vertically, you do:

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

And to correct the movement off-screen, you can either...

(option 1) Shift it negative before the flip (so it gets flipped back on screen):

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

(The translate is listed second here because transform lists are effectively applied right to left)

(option 2) Or, you can shift it positive (by the scaled size) afterwards:

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

Here is a demo showing vertical flip, horizontal flip and both flips

Update

To flip (in position) an already existing object that is somewhere on screen. First determine its bounding box (minX, minY, maxX, maxY), or centreX,centreY if you already know that instead.

Then prepend the following to its transform:

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

or if you have the centre you can use

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

So in your example:

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

The minX+maxX comes to 200. So to flip horizontally, we prepend:

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

So the final object becomes:

<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)" />

Demo here

Solution 2:

simply add below attributes into path tag in svg

transform="scale (-1, 1)" transform-origin="center"

Eg: <path transform="scale (-1, 1)" transform-origin="center" ......./>

Solution 3:

Meet "Tux" the pinguin. For the sake of this exercise I painted the letters "L" and "R" on his feet.

For starters, let's paint Tux in the center of our canvas. If the canvas is size 500x500, and if Tux has a size of 100x100 we have to position him at (200,200). (i.e. the center minus half its size.)

  <svg width="500" height="500">
    <!-- marking our border and a cross through the center -->
    <rect x="0" y="0" width="500" height="500" stroke-width="2" stroke="red" fill="none"></rect>
    <line x1="0" y1="0" x2="500" y2="500" stroke="red" stroke-width="2"></line>
    <line x1="500" y1="0" x2="0" y2="500" stroke="red" stroke-width="2"></line>

    <!-- our pinguin in the center -->
    <image x="200" y="200" width="100" height="100" href="assets/pinguin.png"></image>
  </svg>

Now, if we want to mirror our pinguin horizontally (switching left and right) it is tempting to just use a transform with scale(-1 1). However, our pinguin just dissappears when we try that.

  <svg width="500" height="500">
    ...
    <image ... transform="scale(-1 1)"></image>
  </svg>

The reason, is that the default point of reflection (the so-called "transform-origin") for our transform is not in the center of our image, but is actually still at the (0,0) point.

The most obvious solution is to move the point of reflection to the central point of the image (250,250). (in this case, the center of our canvas).

  <svg width="500" height="500">
    ...
    <image ... transform="scale(-1 1)" transform-origin="250 250"></image>
  </svg>

And resizing works exactly the same. You can do it in 2 scales or combine them in 1 scale.

  <svg width="500" height="500">
    <!-- use 2 scales -->
    <image x="200" y="200" width="100" height="100" href="assets/pinguin.png"
           transform="scale(-1 1) scale(2 2)" transform-origin="250 250">
    </image>    
    <!-- or just multiply the values of both scales -->
    <image x="200" y="200" width="100" height="100" href="assets/pinguin.png"
           transform="scale(-2 2)" transform-origin="250 250">
    </image>
  </svg>