CSS 用百分比翻译 SVG 组

Question

现在，我似乎能够在 SVG 内的组上应用 translate 和 translate3d，使用 px 但不使用百分比。 我想知道是否可以使用 %?我需要它们的原因是因为我想通过 CSS 为几个 SVG 的内容制作动画。 (使用诸如 snap 或 svgjs 之类的 JS 库给我带来了一大堆其他令人头疼的问题，例如 Chrome 中的缩放问题，所以我宁愿避免使用它们。)

我创建了一个 fiddle 来说明行为: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 question 有点相关，但不能用于动画。)

奇怪的是，我有时看到它在 Chrome 和 Safari 中使用百分比，但在 Firefox 中却不行。虽然似乎无法重新创建它。

Answer 1

至于它有时在 Chrome/Safari 中工作 - 我认为这是由于 Webkit/Blink 中的一个错误，这个错误已经困扰开发人员一段时间了。出于某种原因，最初并未呈现翻译，但如果您在开发人员面板中调整值，例如，您可以看到云已按照您的预期进行翻译。

您还可以在微不足道的超时(0 毫秒)后通过 JavaScript 动态更改样式来强制它呈现。例如，如果您完全删除 CSS 规则并改为执行此操作，它似乎有效:

Demo link

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

这不是一个理想的解决方法，但是 other solutions似乎对我不起作用。 不幸的是，它对 Firefox 也没有帮助，但也许它会有助于解决问题。