Vertical alignment of straight elements inside SVG in the center of Rect

Question

Goal:

I found a tutorial on the Internet to create an endless CSS3 loading icon using rectangles that grow and contract height. They look like this:

It uses 5 div wrapped in an external div , and works just fine. I want to try and recreate the effect using SVG, though, so that I can only link to it with an image, without having to add 5 HTML elements.

---

What I have:

I started with the same CSS animation code and used 5 rect inside the svg tags. The animation works fine, but I can't get the rectangles to center vertically. Since they are placed using the x and y coordinates, which correspond to the top / left point of each rectangle, they are fixed at that location.

 <svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> <rect class="rect1" fill="black" height="30" width="6" x="0" /> <rect class="rect2" fill="black" height="30" width="6" x="10" /> <rect class="rect3" fill="black" height="30" width="6" x="20" /> <rect class="rect4" fill="black" height="30" width="6" x="30" /> <rect class="rect5" fill="black" height="30" width="6" x="40" /> </svg> rect { -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; alignment-baseline:bottom; } .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } } 

See a working example: http://codepen.io/Kelderic/pen/vuipF

One thing that is odd, it works in CodePen, the same code does not run in JSFiddle. It also does not start when I insert CodePen as an SVG.

---

Question

Does CSS use animations like this to work with SVG elements, and can I fix them in the center according to the original?

---

Edit

Answer

js1568 provides what MUST be a fix, and it makes it work in Chrome. This is not affected in Firefox, and after some research, I found that I was not the only one who had the same problem with Firefox.

Setting Transformation Source in SVG Group Not Working in FireFox

I think the only answer here is that at this time this will not work in all browsers. (If anyone knows a way, feel free to add an answer though!)

---

Edit 2

I figured out a way to make this work in Firefox, explained in the answer below. However, IE9-11.

Answer 1

Ok, so I understood the answer to this question, and it works in Chrome and Firefox. IE does not support CSS transformations in SVG elements (although it does support the transform attribute, and I'm trying to figure out a workaround).

Instead of setting the baseline to the center of the rect element, I just use the second animation. I move the item up and down, synchronized in time. This creates the appearance that the element is centered vertically.

I had some problems making it perfectly sync when using the 0.4 scale, so I switched to 0.5 , which still looks good.

HTML:

 <svg version="1.1" baseProfile="full" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> <rect class="rect1" fill="black" height="30" transform="translate(2,2)" width="6" x="0" y="0" /> <rect class="rect2" fill="black" height="30" width="6" x="10" y="0" /> <rect class="rect3" fill="black" height="30" width="6" x="20" y="0" /> <rect class="rect4" fill="black" height="30" width="6" x="30" y="0" /> <rect class="rect5" fill="black" height="30" width="6" x="40" y="0" /> </svg> 

CSS

 @-webkit-keyframes stretchdelay { 0% { -webkit-transform: scaleY(1.0) translate(0,0); } 30%,70% { -webkit-transform: scaleY(0.5) translate(0,15px); } 100% { -webkit-transform: scaleY(1.0) translate(0,0); } } @keyframes stretchdelay { 0% { transform: scaleY(1.0) translate(0,0); -webkit-transform: scaleY(1.0) translate(0,0); } 30%,70% { transform: scaleY(0.5) translate(0,15px); -webkit-transform: scaleY(0.5) translate(0,15px); } 100% { transform: scaleY(1.0) translate(0,0); -webkit-transform: scaleY(1.0) translate(0,0); } } rect { -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; -ms-animation: stretchdelay 1.2s infinite ease-in-out; } .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } 

Result:

(Please note that CodePen recently added a feature that allows you to embed SVG files created as SVG images. Today I found that all CSS needs to be placed in the <style> tags inside the HTML input field. Placing it in the CSS field will not work. )

Answer 2

I edited the code to include transform-origin styles:

http://codepen.io/anon/pen/ojgwr

Is this the effect you were doing?