Низкая производительность в 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>

Есть ли что-нибудь очевидное, что можно сделать, чтобы улучшить производительность в моем примере, кроме как кусать пыль и дублировать анимацию?

0 ответов

Другие вопросы по тегам