Элементы или значки WordPress (SVG) отображаются не так, как ожидалось

Question

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

Это оригинальный дизайн (поставляется с zeplin.io), который я пытаюсь реализовать с помощью elementor

, прежде чем я добавлю последний значок, результат в elementor будет:

Вы можете видеть, что, как и ожидалось, отображается только первый значок

Что странно, но еще более странно то, что когда у меня был последний значок, я получаю следующее:

Теперь значок не отображается, как ожидалось, хотя некоторые из них больше похожи на ожидаемый результат.

Значок сердца перевернулся, а цвета изменились для другие значки,

• Почему добавление нового значка влияет на другие значки таким образом?

• Почему цвет и направление значка не соответствуют t отображать, как установлено дизайном SVG?

• ПРИМЕЧАНИЕ, направление может быть связано с RTL, но почему только сердце перевернулось?

Я знаю, что могу легко решить эту проблему, изменив формат на PNG, но я хотел бы понять причину такого поведения.

Answer 1

Это происходит из-за того, что значки имеют повторяющиеся значения классов, то есть svg добавляется как есть в дерево dom вместе с определениями <style>.

Следовательно, любой класс или идентификатор, который дублируется в два SVG столкнутся, и решение:

• открыть svg в любом текстовом редакторе

• поиск / замена всех идентификаторов / классов, определенных в <style>, чтобы иметь уникальное имя

ПРИМЕЧАНИЕ: причина, по которой этого не происходит в исходном дизайне, заключается в том, что там SVG-файлы добавляются с тегом img.

Woprdpress не позволяет загружать SVG в виде изображений по соображениям безопасности (я понятия не имею, какую проблему безопасности он может создать, но это вопрос сам по себе)

РЕДАКТИРОВАТЬ: Я только что заметил, что после добавления SVG как значок, он также становится доступным как изображение, поэтому лучшим решением будет загрузить SVG как значок, а затем использовать его как изображения. но я не пробовал.