Переменные CSS по умолчанию заполнены SVG, если они недействительны - PullRequest
Новая
       21

Переменные CSS по умолчанию заполнены SVG, если они недействительны

1 голос
/ 03 мая 2019

У меня есть SVG с несколькими канатами, которые меняют цвет заливки при перемещении вниз по SVG (в некотором роде градиента).Пользователи могут выбрать сплошной цвет заливки, чтобы «оформить» свой опыт.Этот цвет заменяет цвет градиента канатов.Я делаю это с помощью переменных CSS.

Однако я хочу по умолчанию вернуться к цвету заливки, определенному в SVG, если они не выбирают цвет темы.В этом случае переменная CSS установлена ​​на '', что делает ее недействительной.Для других элементов я использую значение по умолчанию, к которому элемент возвращается.Я не могу сделать это с правами SVG, поскольку они все разные.Я попытался удалить значение по умолчанию, но я считаю, что это устанавливает начальное значение CSS, которое является прозрачным.

Если у меня есть следующий прямоугольник: <rect id="rect" fill="#000000" x="0" y="0" width="200" height="50" rx="6"></rect> и следующий CSS: rect { fill: var(--preview-primary); } Я бы ожидал, что он будет черным, когда --preview-primary недопустим, но прозрачен.

Есть ли способ, которым я могу это сделать?Спасибо.

Ответы [ 2 ]

2 голосов
/ 05 мая 2019

Нет, откат к атрибуту fill невозможен.

Наличие действительного fill правила CSS будет иметь приоритет над атрибутом fill. Для CSSOM var(--anything) всегда является действительным правилом. Если когда-либо вычисление функции var() будет недопустимым, тогда оно вернется к значению по умолчанию. И значением по умолчанию для fill является black: 

#f {
  fill: var(--foobar);
}
<svg>
  <rect id="f" x="0" y="0" height="80" width="80" fill="green"/>
</svg>

Итак, чтобы обойти эту ситуацию, у вас есть несколько вариантов:

  • Если вы не можете изменить SVG, вы можете включить выбранные пользователем правила, только если значение не "". 

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
  // toggle a class so we know we have to handle it
  document.documentElement.classList
    .toggle('user-selected-color', sel.value !== "");
};
.user-selected-color rect {
  fill: var(--selected-color);
}
select{vertical-align:top}
<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red"/>
  <rect x="90" y="90" height="80" width="80" fill="black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>
  • Если вы можете, вы можете установить CSS каждого элемента color, а затем вернуться к значению CSS currentColor: 

sel.onchange = e => {
  document.documentElement.style
    .setProperty('--selected-color', sel.value);
};
rect {
  fill: var(--selected-color, currentColor);
}
select{vertical-align:top}
<svg height="180" width="180">
  <rect x="0" y="0" height="80" width="80" fill="green" style="color:green"/>
  <rect x="90" y="0" height="80" width="80" fill="blue" style="color:blue"/>
  <rect x="0" y="90" height="80" width="80" fill="red" style="color:red"/>
  <rect x="90" y="90" height="80" width="80" fill="black" style="color:black"/>
</svg>

<select id="sel">
  <option value="">none</option>
  <option>orange</option>
  <option>pink</option>
  <option>violet</option>
  <option>aqua</option>
</select>
0 голосов
/ 03 мая 2019

Удалите стиль fill из SVG и поместите «запасной» цвет по умолчанию в CSS для случая, когда переменная не была определена. 

rect {
  fill: var(--preview-primary, 000);
}


rect {
  fill: var(--preview-primary, black);
}

.red {
  --preview-primary: red;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect class="red" x="10" y="10" height="100" width="100"/>
</svg>
...