Суть: и фильтр и маска на изображение, мне были отданы исходники т.е. наработки но хотелось управлять яркостью изображения, но не через feColorMatrix так как это не удобно.
Есть ли в SVG механизм попроще? Что бы было по типу как в CSS: filter:brightness();
Аналогичный вопрос на toster от коллеги.
Приведу для примера, что необходимо реализовать:
Т.е это вот эти квадратные проёмы и как теперь менять яркость изображения с фильтром?
Пример кода:
rect {
fill: #ccc;
width: 100px;
height: 100px;
}<svg width="500px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="mask">
<rect x="20px" y="20px"></rect>
<rect x="150px" y="20px"></rect>
<rect x="280px" y="20px"></rect>
<rect x="20px" y="150px"></rect>
<rect x="150px" y="150px"></rect>
<rect x="280px" y="150px"></rect>
<rect x="20px" y="280px"></rect>
<rect x="150px" y="280px"></rect>
<rect x="280px" y="280px"></rect>
</mask>
<filter id="filter" color-interpolation-filters="sRGB">
<feColorMatrix values="0.6927 0 0 -0.211588 0.15365 0 0.6927 0 -0.211588 0.15365 0 0 0.6927 -0.211588 0.15365 0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://i.stack.imgur.com/D3Q3J.jpg"
width="500px"
height="400px"
x="0"
y="0"
preserveAspectRatio="none"
filter="url(#filter)" />
<image xlink:href="https://i.stack.imgur.com/D3Q3J.jpg"
width="500px"
height="400px"
x="0"
y="0"
preserveAspectRatio="none"
mask="url(#mask)" />
</svg>
