Animated viewBox - transform scale is blury

[harveyconnor]

trafficstars

Question

My issue is that whenever I animate my svg with a transform function it ends up being blury when I zoom in. The best alternative to this option would be to zoom in via the viewbox which will also offering a panning function. I'm wondering if anyone has been successful in animating the viewBox?

The closest thing I've gotten to is adding an event listener on the animated value however that doesn't update the viewBox with the new scale adjustments.

Please any suggestions or recommendations are welcome! Thanks!

[guiccbr]

Same with me. @harveyconnor , were you ever able to do that?

[harveyconnor]

@guiccbr nope I could never get it to work. The support for this repo is dead.

[guiccbr]

@harveyconnor , I got something working that was a good alternative to me. Instead of using the transform prop, I used the style prop on a <G>. The style prop is not typed though, but it works. And it's great because it doesn't distort the child paths.

Style also works for <Paths> btw. In my case I'm even using react-native-reanimated to animate stuff, and everything works great.

[harveyconnor]

Hi @guiccbr could you please share a repo with us that replicates what you have created :)

[meepak]

I was able to resolve this by simply changing width height within SVG to 100%, wrap the SVG around the Animated.View and use useAnimatedStyle to change width and height. This way I get the smooth zoom effect on svg whereas transform scale results in pixelated zoom.

My problem is I am unabe to do same with custom exiting animation, width and height manipulation not seems to be working there and transform seems to be the only option, is it?

[jakex7]

whereas transform scale results in pixelated zoom.

Hi! This issue (pixelated zoom) has likely been resolved in #2299 and merged into the main branch. Please feel free to test it and provide feedback before the release.

Thank you!