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

Question

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

问题是文本通过嵌套在 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 将其缩小，并且没有响应进一步将字体大小更改为更大的大小。

显示问题的图像

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

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

相同 SVG 嵌套元素的不同尺寸的屏幕 - Chrome , Firefox

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

标签： htmlcssfirefoxsvg