SVG. Reverse image using css. Keep image at the same place

by

Use transform-origin and transform-box

$(".example").on("click", function(e){
  $(e.target).toggleClass("reverse");
})
.reverse{
    transform: scaleX(-1);
    transform-origin: center;
    transform-box: fill-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div style="width: 700px;height: 700px;margin-left: 100px">
    <svg viewBox="-200 0 700 700">
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="150px" x="50", y="50"/>
        <image class="example" href="https://i.pinimg.com/originals/6f/3d/6a/6f3d6aab605e25af947d804c4a2cb558.jpg" width="150px" height="100px" x="100", y="0"/>
      <!--x value can be changed during time-->
    </svg>
</div>

More Related Contents:

  1. Fill SVG path element with a background-image
  2. img src SVG changing the styles with CSS
  3. SVG data image not working as a background-image in a pseudo element
  4. Convert an image to grayscale in HTML/CSS
  5. What are the different usecases of PNG vs. GIF vs. JPEG vs. SVG? [closed]
  6. Does SVG support embedding of bitmap images?
  7. CSS3 Rotate Animation
  8. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  9. How to add animated gradient to an svg path?
  10. Filling water animation
  11. How to render a scaled SVG to a QImage?
  12. Image inside div has extra space below the image
  13. jQuery SVG, why can’t I addClass?
  14. How to keep origin in center of image in scale animation?
  15. CSS transparent curved shape with two rounded sides
  16. How can I display just a portion of an image in HTML/CSS?
  17. Transform origin on SVGs in Firefox
  18. How to animate handwriting text on the web page using SVG?
  19. How to set size for local image using knitr for markdown?
  20. Text on image mouseover?
  21. CSS: 100% width or height while keeping aspect ratio?
  22. Using CSS3 Animations in IE9+
  23. CSS border color switch animation: “from” color not correct
  24. How can I insert an image with iTextSharp in an existing PDF?
  25. How to get rid of extra space below svg in div element
  26. How can I change the color of an ‘svg’ element?
  27. Image Warping – Bulge Effect Algorithm
  28. What is the difference between “JPG” / “JPEG” / “PNG” / “BMP” / “GIF” / “TIFF” Image?
  29. Disable CSS animation on pseudo element inherited from parent
  30. Setting the image `width: 0` hides it, while `width: 0%` makes it occupy the space, too

Leave a Comment