D3.js: перенести картинки (svg) внутрь path, настроить масштабирование

1). В общей структуре svg на странице:
```
...
<g class="objects">
<g class="object">
<path... />
<image... />
</g>
<g class="object">
<path... />
<image... />
</g>
</g>
...
```
— разместить картинки (визуально на самом svg) внутри соответствующего path. Сейчас они складываются стопкой в углу (в параметры "x" и "y" ничего не приходит). Вычислять середину соответствующих bbox'ов. Центрировать картинку по центру bbox.

2). Реализовать следующую логику отображения картинок, в зависимости от размера bbox и масштаба вьюбокса:
- у картинки есть максимальный размер, в котором она отображается, если ей хватает места по ширине/высоте внутри bbox;
- у bbox (или path) есть внутренние отступы до картинки;
- если картинка упирается во внутренние отступы, она масштабируется без искажений;
- при определённом масштабе вьюбокса(!), если bbox становится слишком мелким, считаем, что картинка неразличима, поэтому скрываем её.
То есть: мелкий объект (path) при масштабе 1x — картинку не видно.
Зумим на объект, в момент, когда картинка становится различима — показываем картинку.


Читайте на 123ru.net