2

I am drawing an SVG group with a circle and a piece of text. As part of an animation, I scale the group up and down. When the group is scaled relatively small, everything looks fine. However, once it gets very small, you start getting some nasty artifacts.

An example is below. Notice the circles on the right are fine, but when they get really small, you get the text artifacts on the left.

svg artifacts on firefox

Below is some exemplary SVG code that causes the artifacts. This only seems to happen in 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>
speedplane
  • 15,673
  • 16
  • 86
  • 138
  • Found a Blogpost that isoltes the problem a little more: http://css-tricks.com/forums/topic/why-do-re-sized-svgs-in-image-tags-artifact-sometimes-in-firefox/ Basically FF treats SVG as image different than SVG's as Object Tag Direct Link to CodePen: http://codepen.io/calebbrewer/pen/DlHKk – mons droid Apr 29 '14 at 15:24
  • 1
    Reported to https://bugzilla.mozilla.org/show_bug.cgi?id=1003213 – mons droid Apr 29 '14 at 15:42
  • I think it's now `alignment-baseline` https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/alignment-baseline – jaggedsoft Sep 15 '17 at 08:04

0 Answers0