Я пытаюсь создать пользовательские CTA-кнопки, которые создаются с помощью форм SVG - я пробовал с помощью CSS, но таким образом (SVG) я не впадаю в проблемы блочной модели активации кнопки при наведении курсора на фигуру.
Проблема заключается в том, что текст, накладываемый на текст через ForeignObject, вложенный в элементы SVG:
<foreignObject x="5000" y="0" width="10000" height="17320.5">
<div xmlns="http://www.w3.org/1999/xhtml">
<h2>M1</h2>
</div>
</foreignObject>
отображается по-разному в Chrome и Firefox. Он отлично виден в Chrome, но Firefox уменьшает его и не реагирует на дальнейшее изменение размера шрифта на более крупные.
изображение, представляющее проблему
Я создал этот codepen фрагмент кода, чтобы продемонстрировать проблему.
Я пытался работать с ForeignObject с текстовым элементом SVG, но столкнулся с другой проблемой - Firefox игнорирует или неправильно рассчитывает размеры вложенных элементов SVG.
Экраны разных размеров одного и того же вложенного элемента SVG - Хром , Firefox
Кто-нибудь сталкивался с такой проблемой? Мне нужно представить одинаковый размер шрифта на этих кнопках в обоих браузерах (масштабированный шрифт на FF едва виден), и я хочу избежать абсолютного позиционирования элементов html span над этими кнопками SVG - это будет представлять 2 отдельные кнопки, одну из текста и одну изображения для пользователей и сканеров.