Firefox中嵌套的SVG foreignObject字体大小显示错误

Question

我试图制作通过SVG形状创建的自定义CTA按钮-我尝试使用CSS，但是通过这种方式（SVG），我不会陷入将鼠标悬停在形状之外时激活按钮的盒子模型问题。 / p>

问题是通过嵌套在SVG元素中的foreignObject浸入文本：

<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将其缩小，并且没有响应将字体大小更改为更大的大小。

image presenting the issue

我创建了这个codepen代码段来演示该问题。

我尝试使用SVG文本元素解决foreignObject，但是遇到另一个问题-Firefox忽略或错误地计算了嵌套SVG元素的尺寸。

同一SVG嵌套元素-Chrome，Firefox

的不同大小的屏幕

有人遇到过这样的问题吗？我需要在两个浏览器上的这些按钮上显示一致的字体大小（几乎看不到FF上的缩放字体），并且我想避免将html span元素绝对定位在这些SVG按钮上-这将显示2个单独的按钮，一个是文本，另一个是一个向用户和网络搜寻器显示图像。