У меня есть два отдельных SVGs как такойДва отдельных SVGs являются встречными
<svg>svg 1 stuff</svg>
затем другой SVG
<svg> svg 2 stuff </svg>
Если бы я сделать их по отдельности, это хорошо. Buf если я делаю это
<svg> svg 1 stuff</svg>
<svg>svg 2 stuff</svg>
кажется стили или CSS или что-то взаимодействует и SVGs выглядеть смешно?
Это не стили или css в каждом независимом svg?
Возможно, что существует столкновение CSS. Если они оба находятся в одном документе, то любой CSS, который находится в SVG, будет применяться ко всему. Более поздние правила могут отменять предыдущие и влиять на оба SVG.
Возможно, более вероятно, что они столкнулись с атрибутами id. Это обычная проблема, если вы использовали редакторскую программу, например Illustrator, для создания этих файлов. Программа автоматически генерирует значения атрибутов id для таких элементов, как градиенты, маски и обтравочные контуры. К сожалению, они имеют тенденцию генерировать одну и ту же последовательность идентификаторов для каждого нового файла.
id атрибуты должны быть уникальными в документе, поэтому при наличии дубликатов при объединении обоих SVG на странице возникают непредсказуемые вещи. То, что точно произойдет, будет зависеть от браузера. Поэтому, если файл выглядит по-разному в Chrome и Firefox, то это ключ к тому, что это дубликаты атрибутов id.
Там действительно нет простого решения, чтобы решить проблему, кроме вручную происхожу через один из SVGs и переименования id атрибуты и ничего, ссылающихся их.