Практические примеры применения масок svg

#css #html5 #svg #mask

Прочитал эти статьи по теории масок, но не уверен, что понял всё правильно 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask
http://css.yoksel.ru/svg-masks/  

Вот пример по маскам, пробую изменять параметры, хочется понять основные закономерности,
чтобы в будущем уверенно применять svg маски. 





	 




    

Ответы

Ответ 1

Примеры использования маски

Немного теории плюс примеры и можно сформулировать простые правила, которые будут
помогать в освоении и практическом применении масок.

Можно представить маску в виде 2D объекта, например лист любого материала, который
расположен между нашими глазами и объектом наблюдения.  В листе будут вырезаться отверстия,
форма которых задаются элементами svg между тегами   




Если маска полностью непрозрачна fill="black" мы ничего не увидим.   






	 






Маска имеет форму двух окружностей, которые полностью прозрачны,- fill="white"
Видим после применения маски, вырезанные  части объекта, как они есть на оригинальном
изображении.   






	 



      


Цвет заполнения маски находится между чёрным и белым цветом, то есть прозрачность
маски будет между 0 и 1


На примере часть маски для левого глаза fill="gray" для правого fill="red" 





	 



  

Обработка фона вне маски

Для этой цели в теги  добавляется прямоугольник занимающий всё пространство
маскируемого объекта 

 

Принцип тот же,- для фона вне маски, если fill="white" этот участок останется неизменным.
В итоге фон как есть, а зона действия маски зависит от прозрачности, то есть от выбора
цвета заливки. Для маски,- это глаза fill="black" становятся непрозрачными.  





	 





Теперь фон непрозрачный fill="black" маска fill="white"   

В этой комбинации маска работает, как clipPath  





	 



 

Фон полупрозрачный fill="red" маска прозрачна fill="white"





	 



Ответ 2

Примеры с подключением прозрачности stroke

У базовых элементов SVG: line; polyline, polygon, rect,circle',ellipse,'path 


есть атрибут - stroke-width задавая ширину и прозрачность которого, можно ещё
расширить возможности маски.  
также представляет интерес использование stroke-dasharray и
stroke-dashoffset    

#1

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


	 





#2

Несколько окружностей
 Центр - окружность с самым малым радиусом сделан наиболее прозрачным по сравнению
с внешними окружностями    







	 





#3





	 





#4  

Использование stroke-dasharray 

Делим окружность на 6 равных сегментов, у которых длина черты - 250px, пробел - 64px 





  



	 





#5  

Ещё пример с stroke-dasharray и очень широкой строкой - stroke-width="400"