SVG clipPath в Bootstrap

Хочу сделать из фотографии одной картины модульную картину из 5 частей с помощью clipPath Как бы получается, но в адаптивной верстке все едет: картинка адаптируется, части нет. Как зафиксировать картинку в каждой части при изменении размера окна?
https://jsfiddle.net/aq9Laaew/31565/
.modular{clip-path:url(#modular)} .modular{max-height: 80vh; max-width: 100%; display: block; margin: 15px auto;}

Ответ

Чтобы приложение было адаптивно и не разрушались пропорции между фрагментами изображения необходимо сделать следующее:
Изображение добавить внутрь svg с помощью команды и задать размеры его в процентах width="100%" height="100" Окна вырезать комбинированной маской. При присвоении одним частям маски fill="white" она будет прозрачна и в вырезанных окошках будут видны фрагменты изображения. Закраска fill="black" делает участок маски непрозрачным - это белые перемычки между окнами. Обернуть svg

в родительский контейнер. Изменяя проценты ширины и высоты контейнера можно регулировать начальные размеры блока.
.container { width:100%; height:100%; }

Приложение полностью адаптивно и работает во всех браузерах