Каким образом сменить яркость изображения?

#css3 #svg #svg_animation #css_filters

Суть: и фильтр и маска на изображение, мне были отданы исходники т.е. наработки но
хотелось управлять яркостью изображения, но не через feColorMatrix так как это не удобно.

Есть ли в SVG механизм попроще? Что бы было по типу как в CSS: filter:brightness();

Аналогичный вопрос на  toster  от коллеги.

Приведу для примера, что необходимо реализовать:   



Т.е это вот эти квадратные проёмы и как теперь менять яркость изображения с фильтром?

Пример кода:



rect {
  fill: #ccc;
  width: 100px;
  height: 100px;
}




    

Ответы

Ответ 1

Для информации можно почитать Практические примеры применения масок svg 



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





Затемнение фона регулируется насыщенностью цвета комбинированной маски, той части
маски, которая отвечает за фон  

 
      



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




Ответ 2

Решил добавить rect и через fill-opacity менять яркость 

Осталось решить проблему с дублированием изображения






Ответ 3

Свой фан вариант приведу:



*,
:before,
:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
}

.wrapper {
  height: 100%;
  text-align: center;
  background: url(https://images.unsplash.com/photo-1529408632839-a54952c491e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)
center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

h1 {
  background-color: rgba(0, 0, 0, .5);
  overflow: hidden;
  color: transparent;
  margin: 0;
  padding: 0;
  font-size: 150px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

h1 span {
  background: url(https://images.unsplash.com/photo-1529408632839-a54952c491e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)
center no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: right;
  padding-top: 10%;
  padding-right: 20%;
  position: absolute;
}

  
 ■ ■
■ ■





P.S: Только для современных браузеров, в FF работает, но в IE уже нет.


Ответ 4

Анимация трафарета

Увеличение ячеек

Трафарет в начальном положении находится в верхнем левом углу, затем происходит его
увеличение до размера одной ячейки на весь экран. 



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