SVG clipPath в Bootstrap

#html #css #css3 #svg #анимация

Хочу сделать из фотографии одной картины модульную картину из 5 частей с помощью
clipPath.
Как бы получается, но в адаптивной верстке все едет: картинка адаптируется, части нет.
Как зафиксировать картинку в каждой части при изменении размера окна?

https://jsfiddle.net/aq9Laaew/31565/



.modular{clip-path:url(#modular)}
.modular{max-height: 80vh; max-width: 100%; display: block; margin: 15px auto;}






    

Ответы

Ответ 1

Чтобы приложение было адаптивно и не разрушались пропорции между фрагментами изображения
необходимо сделать следующее:     


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




.container {
width:100%;
height:100%;
}

	 





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


Ответ 2

Вариант с анимацией при наведении курсора на картинку


При наведении курсора на картинку фрагменты изображения сливаются в
целое изображение.


Это обеспечивает команда анимации добавленная в маску:  

 

Реализация смещения фрагмента изображения (секции маски) осуществляется изменением
координаты левого верхнего угла прямоугольника - X values="210;189"   


При уходе курсора с картинки, изображение возвращается к исходному
состоянию :   

   




.container {
width:100%;
height:100%;
}

	 





Вариант анимации с кликом



.container {
width:100%;
height:100%;
}