円とテキストで SVG グループを描画しています。アニメーションの一部として、グループを拡大または縮小します。グループが比較的小さくスケーリングされると、すべてがうまく見えます。ただし、非常に小さくなると、厄介なアーティファクトが発生し始めます。
以下に例を示します。右側の円は問題ありませんが、円が非常に小さくなると、左側にテキスト アーティファクトが表示されます。
以下は、アーティファクトの原因となる SVG コードの例です。これはFirefoxでのみ発生するようです。
<g transform="translate(77 256) scale(0.00469784)">
<circle stroke="rgb(180, 0, 100)" r="30" cx="0" cy="0"/>
<text text-anchor="middle" dominant-baseline="middle" x="0" y="0" font-size="15">Foo Bar</text>
</g>