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

Tango

Топикстартер
20 лет на форуме
Сообщения
150
Реакции
9
Пожалуйста взгляните, если выберете время. Прикрепил тестовый epub. Два скриншота отображающие проблемму и запись в CSS. Разные варианты внедрения svg или дают ошибку в валидаторе или исчезает логотип. Может кто-то боролся с этим форматом в epub 2.01? Спасибо за потраченное время.
Screenshot 2023-09-22 at 10.42.09.png
Screenshot 2023-09-22 at 10.42.22.png
Screenshot 2023-09-22 at 10.44.31.png
 

Вложения

  • 979-8-88926-514-6-epub.epub.zip
    405.1 КБ · Просм.: 95

eugeny

15 лет на форуме
Сообщения
877
Реакции
221
Разве у svg color? кажется там fill.
вот так правильно:
svg { fill: #ffffff;}
 
Последнее редактирование:

Tango

Топикстартер
20 лет на форуме
Сообщения
150
Реакции
9
Разве у svg color? кажется там fill.
вот так правильно:
svg { fill: #ffffff;}
как то же она меняется в зависимости от темы. На форумах говорят заливкой при прозрачном фоне.
 

eugeny

15 лет на форуме
Сообщения
877
Реакции
221
можно, тогда ваш svg получить, посмотреть код.
В крайнем случае, вы можете сделать два лого в файле. Наложить друг на друга.
и свойством display: none отключать ненужное.
 

Tango

Топикстартер
20 лет на форуме
Сообщения
150
Реакции
9
Пожалуйста. Ваш рецепт постичь своим скудным умом не могу для использования в epub
 

Вложения

  • LOGO.svg.zip
    4.8 КБ · Просм.: 118

eugeny

15 лет на форуме
Сообщения
877
Реакции
221
Совсем забыл —свойство 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;
}
 
  • Спасибо
Реакции: Tango

eugeny

15 лет на форуме
Сообщения
877
Реакции
221
вот с вашим svg в класс добавил fill, но надо встраивать если через <img src>, то это обычная картинка, ничего в ней не поменять.
1695371191203.png
 
  • Спасибо
Реакции: Tango

Tango

Топикстартер
20 лет на форуме
Сообщения
150
Реакции
9
вот с вашим svg в класс добавил fill, но надо встраивать если через <img src>, то это обычная картинка, ничего в ней не поменять.
Посмотреть вложение 161004
Спасибо за Ваше время. Осталось понять как в случае темной темы отобразить белую заливку, а в случае светлой черную, лого всего два цвета имеет.
 

eugeny

15 лет на форуме
Сообщения
877
Реакции
221
Спасибо за Ваше время. Осталось понять как в случае темной темы отобразить белую заливку, а в случае светлой черную, лого всего два цвета имеет.
если встроите код svg в страницу, то это заработает
1695371774120.png

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

Tango

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

Tango

Топикстартер
20 лет на форуме
Сообщения
150
Реакции
9
Надеюсь валидатор не сойдет с ума от встраивания svg в саму страницу. По крайней мере на Ваш зелёный кружок он не ругался.
 

eugeny

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

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

MrDesigner

15 лет на форуме
Сообщения
2 107
Реакции
773

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

Tango

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

Вам еще размер придется задать у класса meta-logo, а то логотип будет большим
так и есть он встраивается большим и не перекрашивается :( хотя валидатор не ругается. Надеюсь остался совсем небольшой шаг к концу тонеля :(
 

Вложения

  • Screenshot 2023-09-22 at 12.09.33.png
    Screenshot 2023-09-22 at 12.09.33.png
    56.9 КБ · Просм.: 87
  • Screenshot 2023-09-22 at 12.09.33.png
    Screenshot 2023-09-22 at 12.09.33.png
    56.9 КБ · Просм.: 86

Tango

Топикстартер
20 лет на форуме
Сообщения
150
Реакции
9

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

Tango

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

Вам еще размер придется задать у класса meta-logo, а то логотип будет большим
Наверное нужно не просто код svg добавить а с тем что вы в самом начале писали, когда он красным перекрасился?
 

eugeny

15 лет на форуме
Сообщения
877
Реакции
221
а как у вас код (html)выглядит где .dark-theme и light-theme?
вверху перед лого
 

eugeny

15 лет на форуме
Сообщения
877
Реакции
221
непонятно где класс появляется .dark-theme и light-theme