Scale and mirror SVG object

by

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

More Related Contents:

  1. How to calculate the SVG Path for an arc (of a circle)
  2. Circle drawing with SVG’s arc path
  3. How to convert a PNG image to a SVG? [closed]
  4. Removing transforms in SVG files
  5. How to use the viewBox attribute?
  6. How to set transform origin in SVG
  7. Remove the host HTML element selectors created by angular component
  8. How many levels of recursion does SVG support?
  9. Add custom icons to font awesome
  10. semantic zooming of the force directed graph in d3
  11. Catmull-Rom interpolation on SVG Paths
  12. Find svg viewbox that trim whitespace around
  13. Default background color of SVG root element
  14. How to convert a SVG to a PNG with ImageMagick?
  15. SVG shadow cut off
  16. Crop to fit an svg pattern
  17. How to place multiple evenly-spaced arrowheads along an SVG line?
  18. SVG Positioning
  19. svg multiple color on circle stroke
  20. How can I cut one shape inside another?
  21. Avoiding lines between adjecent svg rectangles
  22. Can I apply a gradient along an SVG path?
  23. Adding feDropShadow to a vertical line in SVG makes it disappear
  24. Add text/label onto links in D3 force directed graph
  25. Converting an svg arc to lines
  26. Simple fill pattern in svg : diagonal hatching
  27. Pure SVG way to fit text to a box
  28. SVG images blocked by gmail proxy
  29. Why can’t I reference an SVG linear gradient defined in an external file (paint server)?
  30. is it possible to make SVG circle fill color from bottom to top based on percentage? [duplicate]

Leave a Comment