4 ms·

Show HN: React-svg-pan-zoom – A component that adds pan and zoom to SVG

48 points by chrvadala 10y ago

chrvadala 10y ago
Hi, I'm the developer of this React component. I started this work after I realised that there wasn't any SVG pan zoom component fully written with React. I hope that it will be useful for the community.
- HorizonXP 10y ago
  Very much so! Thank you for building and releasing this!
  - chrvadala 10y ago
    Thank you!
- wjdp 10y ago
  Packaging this as a chrome extension would be fantastic. Would be of use when viewing raw SVG files.
  - chrvadala 10y ago
    Interesting idea. I have never wrote a chrome extension. I will study how to do it.
  - deleted 10y ago
    [deleted]
- emehrkay 10y ago
  Nice, I think I will use this without React. Thanks
ceejay 10y ago
This looks really cool. Can't wait to try it.
- okigan 10y ago
  Why does svg need this kind of special handling (could be done for a div inside a div and just work for svg)?
  - chrvadala 10y ago
    You are right, I think that this work could be adapted to work properly with div, but when I started to develop it I was interested to perform this operation only on a SVG image.
- chrvadala 10y ago
  Thank you
brian_c 10y ago
Nice! I worked out a little proof of concept a while back for a pan-and-zoom wrapper around any ol' HTML, if that's of any interest: https://github.com/brian-c/react-zoomable https://github.com/brian-c/react-zoomable I haven't tried it with SVG, but I imagine it'd work fine.
hyperdeficit 10y ago
It's great to see other people's solution to these types of challenges in React. We have been implementing something similar for images because the existing components didn't meet our needs. I look forward to digging into your code and seeing how you implemented it.
WhitneyLand 10y ago
Ugh, please add basic mobile support (touch).
- chrvadala 10y ago
  I'm working on it on a branch https://github.com/chrvadala/react-svg-pan-zoom/tree/add-mobile-support https://github.com/chrvadala/react-svg-pan-zoom/tree/add-mob.... I have already added touch support, but I haven't yet released it because I need to test it on some other devices.

48 points by chrvadala 10y ago

Hi, I'm the developer of this React component. I started this work after I realised that there wasn't any SVG pan zoom component fully written with React. I hope that it will be useful for the community.

HorizonXP 10y ago
Very much so! Thank you for building and releasing this!
- chrvadala 10y ago
  Thank you!
wjdp 10y ago
Packaging this as a chrome extension would be fantastic. Would be of use when viewing raw SVG files.
- chrvadala 10y ago
  Interesting idea. I have never wrote a chrome extension. I will study how to do it.
- deleted 10y ago
  [deleted]
emehrkay 10y ago
Nice, I think I will use this without React. Thanks

ceejay 10y ago

This looks really cool. Can't wait to try it.

okigan 10y ago
Why does svg need this kind of special handling (could be done for a div inside a div and just work for svg)?
- chrvadala 10y ago
  You are right, I think that this work could be adapted to work properly with div, but when I started to develop it I was interested to perform this operation only on a SVG image.
chrvadala 10y ago
Thank you

brian_c 10y ago

Nice! I worked out a little proof of concept a while back for a pan-and-zoom wrapper around any ol' HTML, if that's of any interest: https://github.com/brian-c/react-zoomable https://github.com/brian-c/react-zoomable I haven't tried it with SVG, but I imagine it'd work fine.

hyperdeficit 10y ago

It's great to see other people's solution to these types of challenges in React. We have been implementing something similar for images because the existing components didn't meet our needs. I look forward to digging into your code and seeing how you implemented it.

WhitneyLand 10y ago

Ugh, please add basic mobile support (touch).

chrvadala 10y ago
I'm working on it on a branch https://github.com/chrvadala/react-svg-pan-zoom/tree/add-mobile-support https://github.com/chrvadala/react-svg-pan-zoom/tree/add-mob.... I have already added touch support, but I haven't yet released it because I need to test it on some other devices.