Стиль оформления: свойство fill для текста в SVG-панели

Не срабатывает свойство fill для текста. При этом свойство stroke работает. В чём может быть причина? Любые другие элементы кроме текста - работает.

А вы не пробовали использовать стандартные HEX значения цветов? прим: #ff0800 или #008000

Дело в том, что у вас в статье SVG-панели (Dashboards) — Wiren Board есть пример как раз изменения цвета текста. Для тех же самых целей мне и нужно. Вот приведённый в статье скрин, где меняется цвет показаний температуры при превышении значений. Раз скрин сделали, значит такой функционал работал уже. Сломали, выходит? :grinning_face:

Добрый день! Да, для текста нет поддержки заливки.
Можно, наверное добавлять перед началом текста символ █ (█), чтобы было более заметно, но в некоторых случаях это может выглядеть не очень эстетично, конечно.
Хочел уточнить – вы бы хотели сделать, чтобы текст был инвертирован (белый на красном фоне, черный на желтом, белый на зеленом, и т. п.)? Чтобы добавить в пожелания разработчикам.

Ответ разместился выше вашего поста.

Понял, что-то я сначала бросился решать не совсем ту проблему, извините!
Ну и картинка немного вводит в заблуждение. На скриншоте в примере сзади прямоугольник с зеленой заливкой, на фоне которого размещен текст. Если хотите так же, прсто сделайте еще прямоугольник, разместите на нем текст, и меняйте стиль оформления прямоугольника (или и текста, и прямоуголька).

У текста fill и stroke задают параметры начертания самого символа/глифа как геометрической фигуры: fill заполняет его внутренюю замкнутую область. На том же █ это хорошо видно: если задать, например ';stroke: red ;fill: yellow', то при выполнении условия это будет выглядеть так:
image

А вот у меня как раз почему-то fill не заполняет внутреннюю область текста. Контур работает, а заполнения нет. Только то что нарисовано в исходном тексте. А так хотел сделать что-то подобное, как у вас в примере. Текст, заполненный зелёным цветом ни в какую не меняет свой цвет через fill. Работает только параметр stroke; &Block перед текстом также не закрашивается. Т.е. всё что биндится к тексту не закрашивается. В чём может быть дело? Проблема в исходном SVG-файле? Создал его в рекомендованном InkScape.

На скрине надписи “Нет” должны окрашиваться в красный, когда “Да”. Не окрашиваются.

Температура ниже должна быть Красным цветом, но тоже не срабатывает.

image

Код текстового объекта

<text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:2.11667px;font-family:Arial;-inkscape-font-specification:Arial;text-align:start;writing-mode:lr-tb;direction:ltr;text-anchor:start;white-space:pre;inline-size:0;display:inline;fill:#000000;fill-opacity:1;stroke:#24221c;stroke-width:0.1;stroke-linejoin:round;stroke-dasharray:none;paint-order:stroke fill markers"
     x="69.750786"
     y="37.328789"
     id="text24-8-8-7-6-8-8-6-1-9-8-6-2"
     transform="translate(-0.02262494,-0.07253385)">

Для простоты создал новую SVG-панель с одни лишь объектом - словом TEXT.

Тоже самое, заливка не работает (у меня прошивка wb-2507 stable)

Результат:

Исходный файл:

У нас, конечно, тема с SVG освещена скудно, это надо признать. Мало информации, мало примеров. Буду сейчас разбираться, постараюсь у разработчиков уточнить.
Я, прежде чем льветить, попробовал в качестве эксперимента взять готовую нашу демо-панель с контроллером, и поменять заливку какого-то из готовых элементов.


Буду разбираться, вернусь с ответом.

Разобрался. Рассказываю по шагам, на примере с планом квартиры. Документация содержит все нужную информацию, и все работает у нас, ничего не сломано, просто, возможно, есть не вполне очевидные моменты.

  1. Сам пример с планом квартиры можно скачать по ссылке со страницы документации про SVG-панели, ссылка на архив с примерами в последнем разделе “Полезные ссылки и материалы”, файл в архиве – Flat.svg.

  2. Если открыть Flat.svg в Inkscape – можно увидеть, что “панель” Климат (climate) – это группа объектов, которая состоит из зеленоватого прямоугольника с полупрозрачной заливкой (rect1273 на скриншоте) и групп текстовых полей (название показателя – значение) поверх него:

  3. Создаем новую SVG-панель в контроллере, загрузив Flat.svg. В редакторе можно выбрать этот прямоугольник и изменить стиль оформления:


    (Я привязал цвет fill к значению влажности для экономии времени, но для нескольких показателей я бы создал виртуальное устройство со значением 1/0, которое бы устанавливало 1/0 в зависимости от всех порогов всех значений, и привязывал бы стиль к значению этого виртуального устройства).

  4. Стиль отображения каждого отдельного показателя задается отдельно:

Попробуйте, мне кажется, теперь должно быть более-менее ясно, как это делать. Если останутся вопросы – обращайтесь!

Дело оказалось вот в чём. Вот код текстового поля, которое генерирует Inkscape:

Нужно удалить свойство fill из кода, т.к. указанное здесь значение не переопределяется в редакторе SVG Wirenboard. Т.е. оно имеет здесь более высокий приоритет. А вот как сделать чтобы SVG-редактор Wirenboard переопределял эту запись, это уже вопрос к вам.

После удаления вручную, текст начинает менять цвет заливки.

Это странно, а какая версия ПО контроллера у вас, не подскажете?

Добрый день! У меня wb-2507 stable. В ваших примерах SVG-панелей работает потому, что этой записи fill в тексте нет. Видимо, была более старая версия inkscape. Попробуйте закинуть мой файл с единственной надписью.

Подтверждаю. Всё так и есть, как описано. Но я разбираться не стал, было не сильно актуально. А @Akphantom молодец, докопался до истины.

У меня последний testing. Абсолютно точно такое же поведение.

Добрый день, все подтверждается, да, завели баг, будем исправлять.
Спасибо большое, что обратили на это наше внимание!

Добрый день.

Не подскажите когда ждать исправлений?

Сегодня наткнулся на эти же грабли. Благо что читал эту тему неделю назад и вспомнил , но это сильно усложняет работу с SVG панелями. У меня довольно много текстовой информации и вручную править текст не удобно и отнимает много времени.