Sign in to follow this  
  • entries
    42
  • comments
    61
  • views
    32652

bbox.js

Sign in to follow this  
jjd

886 views

Hi,

This weekend I had an itch that I needed to scratch. I have sporadically been working on a project that uses SVG and javascript. I kept coming up against two problems: (1) getting a reliable bounding box around an SVG path, and (2) being able to properly align SVG paths with one another.

There are other solutions to finding the bounding box of an SVG path. Popular solutions are using the functionality of the SVG API itself, or using the awesome RaphaelJS library.

The SVG API is not pleasant to work with and, from what I understand, focuses more on operating at the level of the SVG node itself (what I would consider the root of the scene graph). I am more interested in working with the paths and composing objects from sets of paths. So, for the bounding information this is a little awkward, but it is really the alignment information that is unavailable. In particular, when you have an anchor point on a shape that is not in the middle or at the edges, it gets fiddly. I don't like fiddly. Especially, when I am working with things like Bezier curves that are really quite nice to work with. The information about the inflection points is really useful for what I am doing.

RaphaeJS is an awesome library but sometimes you just want to a solution to one particular problem. Since I was not intending to use RaphaelJS for anything else, just importing it to calculate a bounding box seemed wasteful.

And finally, I just wanted to solve it! :-) I love this kind of problem so I had a hard time not doing it.

The code is free and open and I hope some of you reading this may find it useful.

https://github.com/jdowner/bbox.js

-Josh
Sign in to follow this  


1 Comment


Recommended Comments

I remember when I used to include the whole Boost library exactly as downloaded in my projects, just to use some threading.

 

Sometimes it is better to simply solve things for oneself!

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now