CSS translates SVG group with percent

Question

Currently, I seem to be able to apply translate and translate3d in a group inside SVG using px but not using percentages. I am wondering if% can be used at all? The reason I need them is because I want to animate the contents of several SVGs through CSS. (Using a JS library like snap or svgjs gives me a whole bunch of other headaches, such as scaling issues in Chrome, so I'd rather not use them.)

I created a fiddle to illustrate the behavior: http://jsfiddle.net/f4MU3/4/

CSS

.cloud-svg .group { -webkit-transform:translate3d(50%,50%,0); -moz-transform:translate3d(50%,50%,0); transform:translate3d(50%,50%,0); } 

HTML:

 <div class="container"> <div class="cloud"> <svg class="cloud-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 107.4 50.6" enable-background="new 0 0 107.4 50.6" xml:space="preserve" preserveAspectRatio="xMinYMin meet" width="100%" height="100%"> <svg x="0%" y="0%" viewBox="0 0 107.4 50.6"> <g class="group"> <path d="M74.6 20.6c3.4-5.3 8.5-7.2 14.1-7.9c4.3-0.6 8.7-0.3 12.8 1.7c1.9 0.9 3.2 2.2 3.8 4.1 c0.8 3.1 1.8 6.2 1.9 9.5c0.1 5.8-0.6 11.5 0.2 17.3c0.4 2.8-0.5 3.5-3.3 3.5c-5.2-0.1-10.3-0.5-15.5-0.8c-0.6 0-1.3-0.1-1.9-0.3 c-2-0.9-2.7 3.8-5.2 0.9c-1.7-1.9-4.3-1-6.5-1c-2.1 0.1-4.7 0.2-6.1-0.4c-6.5-3-12.8-0.4-19.1-0.4c-3.9 0-7.7 0.1-11.5-0.9 c-2.9-0.7-5.8-0.2-8.6 0.5c-8.3 2.3-16.7 3.3-25.3 4.1c-2.6 0.2-3.9-0.8-4.1-3.5c-0.2-2.6-0.1-5.2 0.6-7.7 C3.2 30.2 7.6 21.9 14 14.9c4.2-4.6 10.2-5.8 16.3-6.1c1.9-0.1 3.1 1.6 4.6 2.5c1.5 1 2.7 1.5 3.8-0.6c2.3-4.4 6-7.1 10.9-8.2 c1.6-0.3 3.1-1 4.5-1.7c3.7-1.6 7.7-0.9 10.7 1.8c4 3.6 5.4 8.7 7.7 13.3C73.2 17.4 73.2 19.1 74.6 20.6z M95.1 43.5 c0 0 0-0.1 0-0.1c0.3 0 0.6 0 1 0c7.4 0.1 8.5-1.2 7.5-8.4c-0.2-1.3-0.3-2.6-0.4-3.9c-0.1-0.8-0.5-1.5 0.1-2.3 c2.9-3.7 0.6-6.7-1.5-9.5c-2.8-3.7-7.1-4.8-11.3-4.4c-5.1 0.5-10.3 1.7-12.4 7.6c-0.6 1.7-1.4 3.3-2.2 4.9 c-0.3 0.7-0.7 1.5-1.8 1.3c-0.7-0.1-1-0.8-1.3-1.3c-0.6-1-0.6-2.2-0.8-3.3c-0.6-4.9-2.6-9.2-5.4-13.4c-4.4-6.7-6.3-7.6-14-6.1 c-7.1 1.4-12.3 4.8-13.2 12.7c-0.1 1.2-3.5 3.8-4.7 3.7c-0.7 0-1.2-0.4-1.4-1.1c-0.3-0.9-0.5-1.9-0.8-2.8c-1.5-4.2-5.1-5.7-9.2-3.8 c-1.8 0.8-3.5 1.6-5.3 2.4c-1.6 0.8-3.1 1.7-4.1 3.3c-4.1 6.8-6.2 14.2-6.8 22c0 0.5 0 1 0.1 1.5c0.1 1.5 0.8 2.2 2.5 2.1 c2.6-0.1 2.4-1.4 2-3.2c-0.2-1 0.1-2 1.2-2.4c1-0.4 2.2 0.2 2.4 1c1.1 3.9 4.1 2.5 6.1 1.8c2.4-0.9 4.5-1 6.5 0.2 c2.4 1.5 4.8 1.7 7.4 1.2c0.9-0.2 2-0.1 2.9 0.2c8.9 2.5 17.7-0.1 26.5-0.2c0.5 0 1-0.2 1.3-0.5c1.2-1.2 2.1-0.9 3.4 0 c4.4 3.2 9 0.7 13.6 0.3c0.9-0.1 0.9-1.3 1.3-1.9c1.6-2.1 3.2-2.1 4.2 0.4c0.8 1.9 1.7 2 3.3 1.9C92.9 43.4 94 43.5 95.1 43.5z"></path> </g> </svg> </svg> </div> 

(This is somewhat related to this question , but it cannot be used for animation.)

Oddly enough, I sometimes saw that it works with percentages in Chrome and Safari, but not in Firefox. It seems he cannot recreate it, though.

Answer 1

How it sometimes works in Chrome / Safari - I think this is due to a bug in Webkit / Blink, which for some time imposed on developers. For some reason, the translation is not performed initially, but if you, for example, adjust the values ​​in the developer panel, you can see that the cloud is being translated as you expected.

You can also make it visualize by dynamically changing the style using JavaScript after a trivial timeout (0 ms). For example, if you completely remove the CSS rule and do this, it works:

Demo link

 function fix() { var e = document.querySelector(".group"); e.style.transform = "translate3d(50%,50%,0)"; } setTimeout(fix, 0) 

This is not an ideal solution, but other solutions do not seem to work for me. Unfortunately, this also does not help Firefox, but perhaps it will help in the solution.