@dnegorov

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

Задача следующая:
В 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 и прочие навороты на стороне сервера - понятно что проще, но хотелось бы от них уйти.
  • Вопрос задан
  • 112 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
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));
}


Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы