Я пытаюсь отобразить значок SVG-чата в HTML, но из-за некоторых проблем он некорректно отображается в Chrome, но работает так, как ожидалось в Firefox в Windows 10.

Вот значок SVG Chatbot

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><style>.cls-1{fill:#ff000f;}.cls-2{fill:#fff;}</style></defs><title>Codi Button</title><g id="kółko"><circle class="cls-1" cx="32" cy="32" r="32"/></g><g id="Lewe_ucho" data-name="Lewe ucho"><rect class="cls-2" x="9" y="26" width="2" height="14"/></g><g id="Prawe_ucho" data-name="Prawe ucho"><rect class="cls-2" x="53" y="26" width="2" height="14"/></g><g id="Głowa"><path class="cls-2" d="M14,20l-1,1V44.9l1,1H25.75l15,8,1.35-1.34L38.67,45.9H50l1-1V21l-1-1ZM49,43.9H37l-.89,1.46,2.74,5.24L26.47,44,26,43.9H15V22H49Z"/></g><g id="Buzia"><rect class="cls-2" x="28" y="37" width="8" height="2"/></g><g id="Prawe_oko" data-name="Prawe oko"><path class="cls-2" d="M40,30a2,2,0,0,1,2,2h2a4,4,0,0,0-8,0h2A2,2,0,0,1,40,30Z"/></g><g id="Lewe_oko" data-name="Lewe oko"><path class="cls-2" d="M24,30a2,2,0,0,1,2,2h2a4,4,0,0,0-8,0h2A2,2,0,0,1,24,30Z"/></g><g id="Antena"><path class="cls-2" d="M36,14a4,4,0,1,0-5,3.85L31,21h2l0-3.14A4,4,0,0,0,36,14Zm-4,2a2,2,0,1,1,2-2A2,2,0,0,1,32,16Z"/></g></svg>

Мне нужно отобразить вышеуказанный значок SVG как наш новый значок Chatbot. Не могли бы вы сказать мне, где я иду не так?

Ссылка на уже существующий значок чат-бота (Codepen) <<< - Это работает должным образом

Ссылка на новый предлагаемый значок чат-бота (Codepen) <<< --- Это не работает в Chrome, но работает в Firefox (что-то вроде не работает)

Не могли бы вы пролить больше света на эту тему. Любая помощь высоко ценится.

Примечание . Я использую Windows 10 для тестирования этой проблемы (как в Chrome, так и в Firefox)

С наилучшими пожеланиями,

Шаджи Калидасан

0
Shaji Kalidasan 20 Дек 2019 в 17:18

1 ответ

Лучший ответ

Измените тег svg и добавьте высоту и ширину, это очевидная разница между двумя кодами.

<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
1
Cristopher Rosales 20 Дек 2019 в 14:25