Svg 数字 - 需要缩放和翻译，Chrome 和 Firefox 之间的区别答案

【问题标题】：Svg figures - need scale and translate, differents between Chrome and FirefoxSvg 数字 - 需要缩放和翻译，Chrome 和 Firefox 之间的区别
【发布时间】：2015-03-14 14:05:20
【问题描述】：

我有一些带有黄色点（圆圈）的 svg 图。

<html>
<title>Yellow circles</title>
<body>
    <svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px" width="622.4px" height="373px" viewBox="0 0 622.4 373" enable-background="new 0 0 622.4 373" xml:space="preserve">
        <polygon points="0.1,0 622.4,0 622.4,373 0.1,373 "/>
        <polygon fill="#3F3F3F" points="97,51.6 586.2,51.6 586.2,295.5 97,295.5 "/>
        <g transform="translate(342,1098.55)" fill="yellow">
            <g transform="scale(418.2,-405.9)">
                <circle cx=".2888" cy="2.0004" r=".004"></circle>
                <circle cx="-.2666" cy="2.0233" r=".004"></circle>
                <circle cx="0" cy="2.2727" r=".004"></circle>
                <circle cx="-.5845" cy="2.3201" r=".004"></circle>
                <circle cx="0" cy="2.5786" r=".004"></circle>
                <circle cx=".5845" cy="2.3201" r=".004"></circle>
            </g>
        </g>
    </svg>
</body>

问题是我在 3 / 10 台机器上使用 Firefox 看不到黄色圆圈（大多数情况下，圆圈显示在 Firefox 中）注意，使用任何版本的 Chrome 总是显示黄点

【问题讨论】：

三台机器不工作有什么共同点？他们运行的是相同版本的 FF 吗？
我相信 FF 有（曾经有？）与某些浏览器不同的 transform-origin 定义。如果机器都在运行 FF，那么版本将是我开始的第一个地方。
有趣。我明白了。看起来它很可能是一个 FF 错误。如果将圆半径增加到 0.07，它们就会出现。但它们在 0.06 时再次消失。
我已将此情况报告给 FF。 bugzilla.mozilla.org/show_bug.cgi?id=1143303
他们运行相同的最新版本 FF，解决方案“如果将圆半径增加到 0.07，它们会出现”很有用。非常感谢！希望修复该错误，或解决此问题的其他方法。仍然实际将半径减小到 0.04

标签： html css google-chrome firefox svg

【解决方案1】：

我遇到了同样的问题，并在 Firefox 上发现了报告的错误。在 update 发布（版本 42）之前，我的解决方法是使用椭圆而不是圆形，例如。 g.：

<ellipse cx=".2888" cy="2.0004" rx=".004" ry=".004"></ellipse>

【讨论】：