Firefox 中转换后的 svg 子项的奇怪渲染/事件处理
weird rendering of / event handling on transformed svg children in Firefox
所以，我有一个 SVG 叠加层，它有一个多边形拖动手柄，用于调整可缩放图像区域周围的框的大小。在 Chrome 中，一切都运行顺畅，但在 Firefox 中，一切都以难以描述的方式分崩离析。
具体而言，在 Firefox 中（在 54 和 57 中测试），多边形和拖动手柄在正确的位置明显呈现，但指针事件无法访问。我玩过 pointer-events CSS 规则，但这似乎不是问题（或者至少不是明显的主要问题）。
如果我将拖动手柄的 r 值或 stroke-width 增加到超过特定阈值，我 是 能够与 Firefox 中的拖动手柄交互。
我已经 created a codepen 演示了该行为。
在这个例子中，我增加了左上角、左中角和左下角（或它们的笔划）的大小。顶部和左中的手柄将展示悬停效果，而左下角则不会。如果我将左下角 r 提高一个档次，它就会悬停。其余的句柄在 FireFox 中不可悬停。还有一个旋转手柄，它不像其他手柄那么大，但无论如何都可以悬停。同样，Chrome.
一切正常
更奇怪的是 hoverable/eventable space 通常不在渲染元素的正上方。它通常位于上方、下方或侧面。例如，左上角手柄上方的可悬停 space 在手柄的左上角稍远一些。
我最初认为这可能与 Firefox 关于 transform-origin 的问题有关，但经过大量修改后，我不确定它是否与这里相关；特别是对象在视觉上准确地呈现在它应该出现的位置。
完全被难住了。
对于以后看到此内容的其他人来说，@ccprog 绝对是在正确的轨道上。在与 Mozilla 支持讨论后，他们表示大十进制值高于 C++ 精度级别，而不是在父级上缩放并让比例逐渐下降，直接将比例应用于组成员修复了 Firefox 中的呈现问题。
所以，我有一个 SVG 叠加层，它有一个多边形拖动手柄，用于调整可缩放图像区域周围的框的大小。在 Chrome 中，一切都运行顺畅，但在 Firefox 中，一切都以难以描述的方式分崩离析。
具体而言，在 Firefox 中（在 54 和 57 中测试），多边形和拖动手柄在正确的位置明显呈现，但指针事件无法访问。我玩过 pointer-events CSS 规则，但这似乎不是问题（或者至少不是明显的主要问题）。
如果我将拖动手柄的 r 值或 stroke-width 增加到超过特定阈值，我 是 能够与 Firefox 中的拖动手柄交互。
我已经 created a codepen 演示了该行为。
在这个例子中，我增加了左上角、左中角和左下角（或它们的笔划）的大小。顶部和左中的手柄将展示悬停效果，而左下角则不会。如果我将左下角 r 提高一个档次，它就会悬停。其余的句柄在 FireFox 中不可悬停。还有一个旋转手柄，它不像其他手柄那么大，但无论如何都可以悬停。同样，Chrome.
一切正常更奇怪的是 hoverable/eventable space 通常不在渲染元素的正上方。它通常位于上方、下方或侧面。例如，左上角手柄上方的可悬停 space 在手柄的左上角稍远一些。
我最初认为这可能与 Firefox 关于 transform-origin 的问题有关，但经过大量修改后，我不确定它是否与这里相关；特别是对象在视觉上准确地呈现在它应该出现的位置。
完全被难住了。
对于以后看到此内容的其他人来说，@ccprog 绝对是在正确的轨道上。在与 Mozilla 支持讨论后，他们表示大十进制值高于 C++ 精度级别，而不是在父级上缩放并让比例逐渐下降，直接将比例应用于组成员修复了 Firefox 中的呈现问题。