Search code examples
htmlsvgvector

How to find data for an offset path around an SVG <path> element

Given a path data string for an svg <path> element, I need a way to calculate new data for a path that surrounds the original path at a specified offset.

For example: let's take a star SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="512px" height="512px" viewBox="0 0 512 512">
    <path d="M 259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 z"/>
</svg>

Which renders like so:

star

I need to calculate the data for a path that would surround the star at a given distance (a.k.a. "offset").

star outlined

So, My question is: If I have a desired offset, how can I take the path data for the inner (solid) star, and calculate path data for the outer (outline) star?

It may seem as though I should just scale up the star shape and use that. But the outline is, in fact, a different shape with different proportions. This becomes more apparent with larger offsets and more complex shapes.

It seems like the solution would only require some (heavy) math, so the solution should theoretically be language-agnostic. But maybe I'm missing something... My application's backend runs on PHP so I would prefer that.

I feel like this must have been solved somewhere but I can't seem to find a library that can do this kind of operation. I looked at D3.js and the Imagick PHP class but neither seemed to have what is needed.

Solution

  • There is a js library that you can use: flatten-js(to load and manipulate polygon data) with polygon-offset library which does exactly what you are looking for. To convert the SVG path data to points you can use https://github.com/nornagon/flatten-svg

    Something similar can be simply achieved with Dilate filter in SVG, but that will expand the raster data, instead of creating another path data.

    Or, Here is an amazing answer that explains how to do this inside the SVG file by experimenting with stroke-width, but it would require some manual work.