CSS transform origin issue on svg sub-element

by

You need transform-box: fill-box;

@keyframes scaleBox {
  from {transform: scale(0);}
  to {transform: scale(1);}
  }
  #animated-box {
    transform-box: fill-box;
  	animation: scaleBox 2s infinite;
  }
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="
        width: 195px;
    "><defs>
    <style>.cls-1{fill:#7f7777;}.cls-2{fill:#fff;}</style>
    </defs>
    <rect class="cls-1" x="0.5" y="0.5" width="99" height="99"></rect>
    <path d="M99,1V99H1V1H99m1-1H0V100H100V0Z"></path>
    <rect id="animated-box" class="cls-2" x="10.5" y="8.5" width="22" height="6"></rect></svg>

More Related Contents:

  1. How to make moving CSS objects like this?
  2. Fill SVG path element with a background-image
  3. How to modify the fill color of an SVG image when being served as background image?
  4. SVG drop shadow using css3
  5. How to create a circle with links on border side
  6. How to apply a style to an embedded SVG?
  7. SVGs not scaling properly in IE – has extra space
  8. Add a background image (.png) to a SVG circle shape
  9. border curved css – circle with curved end
  10. How to style SVG with external CSS?
  11. html/css hexagon with image inside
  12. Responsive CSS Trapezoid Shape
  13. Circular percent progress bar
  14. CSS ONLY Animate Draw Circle with border-radius and transparent background
  15. Linking to CSS in an SVG embedded by an IMG tag
  16. Creating a ‘New’ spiky label with 24 or above point burst
  17. CSS display none and opacity animation with keyframes not working
  18. How to cut a circular part from an image?
  19. How to calculate required hue-rotate to generate specific colour?
  20. How to change SVG color when it is an encoded CSS background image?
  21. Draw double curved item with beveled edges
  22. How to get ScrollBars in SVG?
  23. Manipulating external svg file style properties with CSS
  24. Css hover sometimes doesn’t work on svg paths
  25. SVG LinearGradient hidden if svg is hidden in seperate class
  26. How do I create a teardrop in HTML?
  27. Create a Reverse Clip-Path – CSS or SVG
  28. Internet Explorer and clip-path
  29. How to curve the div from bottom with image background
  30. svg background image position is always centered in internet explorer, despite background-position: left center;

Leave a Comment