CODEWITHSUNDEEP
javascripthtmlgoogle-chromesvgwebkit
madmed
madmed

Reputation: 636

wierd behaviour of svg text in webkit browsers

I am scaling an svg group on mousewheel using a transform. The group contains a rect and a text node. In firefox and IE this works as expected: the rect and the text are scaled and the text stays in the same position. But in chrome/ipad the text changes differently from the rect : when zooming the text flows in and out of the rect like in these captures: enter image description here enter image description here

Update: Thanks to Robert Longson answer I discovered the bug in question. You can find more info about text-rendering here.

Upvotes: 3

Views: 521

Answers (1)

Robert Longson
Robert Longson

Reputation: 124049

Some UAs apply different font effects such as hinting and kerning only when the font is above a certain size so fonts don't keep a consistent scaling when they zoom.

Setting the attribute text-rendering="geometricPrecision" may help, although there's no absolute guarantee.

If that fails you'll just have to recalculate the bounding box whenever there's an SVGZoom event.

Upvotes: 4

Related Questions