[ID CC2023] Помогите изменить отображение svg в зависимости от темы в программе чтения

[Tango]

Пожалуйста взгляните, если выберете время. Прикрепил тестовый epub. Два скриншота отображающие проблемму и запись в CSS. Разные варианты внедрения svg или дают ошибку в валидаторе или исчезает логотип. Может кто-то боролся с этим форматом в epub 2.01? Спасибо за потраченное время.

 

[eugeny]

Разве у svg color? кажется там fill.
вот так правильно:
svg { fill: #ffffff;}

 

[Tango]

Разве у svg color? кажется там fill.
вот так правильно:
svg { fill: #ffffff;}

как то же она меняется в зависимости от темы. На форумах говорят заливкой при прозрачном фоне.

 

[Tango]

Разве у svg color? кажется там fill.
вот так правильно:
svg { fill: #ffffff;}

Не меняется

 

[eugeny]

можно, тогда ваш svg получить, посмотреть код.
В крайнем случае, вы можете сделать два лого в файле. Наложить друг на друга.
и свойством display: none отключать ненужное.

 

[Tango]

Пожалуйста. Ваш рецепт постичь своим скудным умом не могу для использования в epub

 

[eugeny]

Совсем забыл —свойство fill работает, когда svg встрен в код, а не прилинкован через <img>
Типа:

<div class="image">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
    <circle cx="15" cy="15" r="15"></circle>
  </svg>
</div>
  css
  .image svg {
  fill: darkgreen;
}

 

[eugeny]

вот с вашим svg в класс добавил fill, но надо встраивать если через <img src>, то это обычная картинка, ничего в ней не поменять.

 

[Tango]

вот с вашим svg в класс добавил fill, но надо встраивать если через <img src>, то это обычная картинка, ничего в ней не поменять.
Посмотреть вложение 161004

Спасибо за Ваше время. Осталось понять как в случае темной темы отобразить белую заливку, а в случае светлой черную, лого всего два цвета имеет.

 

[eugeny]

Спасибо за Ваше время. Осталось понять как в случае темной темы отобразить белую заливку, а в случае светлой черную, лого всего два цвета имеет.

если встроите код svg в страницу, то это заработает

если линковать картинку, то через два блока и два лого по разному покрашенных.
.dark-theme .svg-light {display: none}
.light-theme .svg-dark {display: none}

 

[Tango]

Звучит завораживающе! Как мне встроить этот код в страницу? (Глядя в пол сказал он
Там внутри должно быть два "модуля" перед основным блоком и он будет перекрашивать на лету? или я совсем запутался...

 

[Tango]

Надеюсь валидатор не сойдет с ума от встраивания svg в саму страницу. По крайней мере на Ваш зелёный кружок он не ругался.

 

[eugeny]

если встраивать то строка с кодом: <div class='meta-logo'><img src="\logo.svg" /></div>
меняется на <div class='meta-logo'><svg>.......</svg></div>
Открываете ваше лого в текстовом редакторе, и копируете все начиная с открывающего тэга svg до его закрытия(включая)
и вставляете в тот же див все это

Вам еще размер придется задать у класса meta-logo, а то логотип будет большим

 

[MrDesigner]

Не по теме:
Поделюсь личным опытом: мне, как не шарящему в CSS-вёрстке ни грамма, в своё время сильно помог ChatGPT. На своём сайте сделал все хотелки, которые, как ни странно, работают. ))

 

[Tango]

если встраивать то строка с кодом: <div class='meta-logo'><img src="\logo.svg" /></div>
меняется на <div class='meta-logo'><svg>....</svg></div>
Открываете ваше лого в текстовом редакторе, и копируете все начиная с открывающего тэга svg до его закрытия(включая)
и вставляете в тот же див все это

Вам еще размер придется задать у класса meta-logo, а то логотип будет большим

так и есть он встраивается большим и не перекрашивается хотя валидатор не ругается. Надеюсь остался совсем небольшой шаг к концу тонеля

 

[Tango]

Не по теме:
Поделюсь личным опытом: мне, как не шарящему в CSS-вёрстке ни грамма, в своё время сильно помог ChatGPT. На своём сайте сделал все хотелки, которые, как ни странно, работают. ))

Вчера я провел целый день в беседах с искуственным интелектом, но ни один из предложенных рецептов не сработал. А вот на форуме люди практически сталкивались. Надеюсь решение будет найдено. Спасибо

 

[Tango]

если встраивать то строка с кодом: <div class='meta-logo'><img src="\logo.svg" /></div>
меняется на <div class='meta-logo'><svg>....</svg></div>
Открываете ваше лого в текстовом редакторе, и копируете все начиная с открывающего тэга svg до его закрытия(включая)
и вставляете в тот же див все это

Вам еще размер придется задать у класса meta-logo, а то логотип будет большим

Наверное нужно не просто код svg добавить а с тем что вы в самом начале писали, когда он красным перекрасился?

 

[eugeny]

а как у вас код (html)выглядит где .dark-theme и light-theme?
вверху перед лого

 

[Tango]

а как у вас код (html)выглядит где .dark-theme и light-theme?
вверху перед лого

вот

 

[eugeny]

непонятно где класс появляется .dark-theme и light-theme