CSS translate SVG group with percentages

Question

Right now, I seem to be able to apply translate and translate3d, on a group inside a SVG, using px but not using percentages. I'm wondering if it's at all possible to use %? The reason I need them, is because I want to animate the content of several SVG's via CSS. (Using a JS library such as snap or svgjs is giving me a whole bunch of other headaches such as scaling issues in Chrome, so I'd rather avoid using those.)

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 that can't be used for animation.)

Strangely enough, I've sometimes seen it work with percentages in Chrome and Safari but not in Firefox. Can't seem to be able to recreate it though.

score 1 · Answer 1 · edited May 23 '17 at 12:29

As for it sometimes working in Chrome/Safari - I think this is due to a bug in the Webkit/Blink which has been plaguing developers for a while. For some reason, the translation isn't being rendered initially, but if you tweak the values in the developer panel, for example, you can see that the cloud is translated as you would expect.

You can also force it to render by changing the style dynamically through JavaScript after a trivial timeout (0ms). For example, if you remove your CSS rule altogether and do this instead, it seems to work:

Demo link

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

This isn't an ideal workaround, but other solutions didn't seem to work for me. Unfortunately it also doesn't help with Firefox, but perhaps it will help in the direction of a solution.

CSS translate SVG group with percentages

1 Answers1

Demo link