Низкая производительность в SVG-изображениях с перекрестными ссылками
Производительность очень низкая, когда встроенный SVG ссылается (анимируется) на части другого SVG через элемент "use". Поскольку дублирование анимации вручную в двух "несвязанных" SVG-изображениях имеет высокую производительность по сравнению, я не могу понять, почему браузер не смог лучше оптимизировать элемент "использования". Пожалуйста, перейдите по ссылке, чтобы увидеть иллюстрированный пример: http://jsfiddle.net/roenbaeck/kbU4T/23/
<svg id="animation" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<g id="ball">
<circle class="ball" r="5"/>
</g>
</defs>
<g id="ballpark"/>
</svg>
<svg id="copy" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none">
<use id="viewport" xlink:href="#ballpark"/>
</svg>
Есть ли что-нибудь очевидное, что можно сделать, чтобы улучшить производительность в моем примере, кроме как кусать пыль и дублировать анимацию?