Растровая картинка как фон для path в SVG

#изображения #svg #png #path

Есть задача установить значение .test {fill: url(image.png)} для 

Гугл уже кипит от моих запросов по этой теме. Пробовал и clippath и mask но почему
то не выходит. Подскажите, что не так делаю или как решить данную задачу?
    

Ответы

Ответ 1

Пробовал и clippath и mask но почему то не выходит. Подскажите что не
  так делаю или как решить данную задачу?      


 clipPath

Представьте, что у вас есть лист с картинкой, вы накладываете на неё шаблон и  вырезаете
ножом по шаблону. Всё лишнее отбрасываете и используете только вырезанную часть картинки.
 Вот так работает clippath. В качестве шаблона выступает фигура SVG      


      
      


Далее вы указываете ссылку на изображение из которого вырезаете фигуру.   

     


Обратите внимание, что тег SVG  используется здесь, как свойство CSS clip-path="url(#clip-ff)"
     



 

 






UPD 26.11.2017    

Пример SVG clipPath для оформления шапки сайта  



.banner_1 {
  min-height: 100px;
  background-color: #41dddb;
 
}
.banner_2 {
  background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
   background-size:cover;
}




    




mask

Принцип действия здесь другой в отличии от clipPath. 

Маска это трафарет сквозь который вы смотрите на рисунок, то. что вы видите сквозь
трафарет, будет выведено на экран.   В качестве трафарета может выступать любая  фигура
svg: rect, polygon, polyline, circle, ellipse, pathили их совместная комбинация.    

маску до её применения обязательно прячут в секции 

 
    
      
    


Ниже код, использования маски:




 


	
	


  

Обратите внимание, что обязательно нужно задать цвет заполнения маски:    

style="fill:white;stroke-width:1;stroke:white"     


Белый цвет - полная прозрачность, чёрный -маска непрозрачна. Другие цвета заполнения
маски будут работать, как свойство opacity. Например: серый цвет - даёт полупрозрачность.     

Комбинированная маска

Состоит из двух фигур SVG: 


прямоугольника (rect), у которого цвет заполнения отличается от
white и black и поэтому мы получаем полупрозрачную область фона.  
path - шестиугольник с белым цветом заполнения - полностью
прозрачная область.        


Обводка (stroke) шестиугольника оттенок серого. 





 



	


 

Более подробно, с примерами, -  Практические примеры применения масок svg


Ответ 2

Пожалуй только через defs и инлайново: