Можно ли на чистом HTML+CSS+SVG сделать фигуру у которой цвет fill на XX% темне/светлее цвета stroke если цвет задан например как «green»?

Question

[dnegorov]

Задача следующая:
В 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 и прочие навороты на стороне сервера - понятно что проще, но хотелось бы от них уйти.

Answer 1

[profesor08]

hsl поможет

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);

  --link-color: hsl(var(--link-color-hsl));
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-30: hsla(var(--link-color-hsl), .3);
  --link-color-40: hsla(var(--link-color-hsl), .4);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-60: hsla(var(--link-color-hsl), .6);
  --link-color-70: hsla(var(--link-color-hsl), .7);
  --link-color-80: hsla(var(--link-color-hsl), .8);
  --link-color-90: hsla(var(--link-color-hsl), .9);

  --link-color-warm: hsl(calc(var(--link-color-h) + 80), var(--link-color-s), var(--link-color-l));
  --link-color-cold: hsl(calc(var(--link-color-h) - 80), var(--link-color-s), var(--link-color-l));

  --link-color-low: hsl(var(--link-color-h), calc(var(--link-color-s) / 2), var(--link-color-l));
  --link-color-lowest: hsl(var(--link-color-h), calc(var(--link-color-s) / 4), var(--link-color-l));

  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
}

Comments

[dnegorov]

Задавать цвет через HSL или RGB составляющие это понятно.
Но человеку, например ребенку, не знакомому с этой "магией" будет сложно объяснить, что надо вместо простого названия цвета, разобрать его на запчасти и потом еще как разобрать...
Есть ли вариант ограничиться стандартным названием цвета и уже потом разложить его на HSL или RGB составляющие?

[profesor08]

dnegorov, не вижу проблемы в объяснении ребенку что такое цвет и с чем его едят, какие есть форматы и чем они хороши.

Если хочешь простоты, то используй scss, но надо понимать, что это препроцессор и его правила не будут работать в css.

$red: #ff0000;

.elem-1 {
  color: lighten($red, 10%);
}

.elem-2 {
  color: darken($red, 10%);
}

.elem-3 {
  color: darken(rgba(255, 0, 0, 0.5), 10%);
}