background для SVG

#css3 #html5 #svg #svg_animation

Есть задача в SVG, - нужно добавить background, точнее фотографию. Максимально, что
смог нагуглить это - создать маску, но проблема в том, что размеры SVG сильно изменяются.
Все попытки вернуть первоначальный размер, не к чему не привели. 

Возможно есть другие решения для этой задачи?



Оригинальный размер:       




SVG c маской:




Ссылка на код в Codepen
    

Ответы

Ответ 1

Это ошибка:


  
   
      
	    
          
     
    
 
   





Обратите внимание, - я добавил прямоугольник в маску  

  



Если нужно, чтобы был виден немного фон замените чёрный цвет на более
светлый, например -  red 










Допустим вам нужно наоборот, чтобы  вырез в форме волны был не
закрашен, а фон остался, как есть. 









Анимация фона

Для анимации фона добавляем команду перемещения картинки вверх, вниз 

 









Связанная тема: Изменение background для SVG c однотоного на изображение