Задача следующая:
В SVG файле есть набор символов, в символе может быть одна или несколько фигур, фигуры могут перекрываться, например:
<symbol id="picture1">
<circle cx="150"
cy="150"
r="15"
fill-opacity="calc( var(--svg-colored-icons, 1) )"/>
</symbol>
В HTML подключаем наш SVG и используем наши символы:
<div class="picture_container">
<svg class="xxx" id="yyy">
<use href="file.svg#picture1" />
</svg>
</div>
Мы можем в CSS или HTML задать цвет stroke и fill по отдельности, можно с использовать currentColor и задать один цвет для stroke и fill.
В CSS определяется переменная --svg-colored-icons, если она 0 то мы получаем только контур, если 1 - видим залитую фигуру.
Можно ли как-то сделать в чистом CSS+SVG+HTML чтобы оттенок цвета fill вычислялся от цвета заданного для stroke?
Например, если stroke = "var(--colorX)" при --colorX: green получить для fill цвет темнее или светлее на какую-то нужную величину, определяемую переменной --colorX-darken: 20.
При этом желательно иметь возможность определять --colorX любым способом задания цветов, в крайнем случае сойдет только по названию и/или в HEX.
Хочется избежать способов задания цветов только через RGB составляющие типа:
--color1-red: 128;
--color1-green: 200;
--color1-blue: 23;
--fill-color1: rgb( calc( var(--color1-red) - var(--colorX-darken) ) , ...
Как вариант решения задачи, подойдет способ разложить --colorX: fuchsia на RGB составляющие и уже работать с ними через функции RGB и CALC.
Не подходит вариант с fill-opacity: залитая фигура не должна просвечивать, под незалитой фигурой должны быть видны контуры других фигур.
Javascript и прочие навороты на стороне сервера - понятно что проще, но хотелось бы от них уйти.
Простой
Средний