patterns and images do not inherit proper sizing from hexagons

[maxheld83]

It appears that the sizing of patterns and images always defaults to this:

<pattern id="1,2,-3" patternUnits="objectBoundingBox" x="0" y="0" width="10" height="10">
  <image xlink:href="http://lorempixel.com/400/400/cats/1/" x="0" y="0" width="20" height="20"></image>
</pattern>

even when the hexagons in question have, say, size 8 8, as is the case in the drag and drop example (tiles) from which I took this code: http://karkk.ai//nen/react-hexgrid/examples/drag-and-drop/

If you look carefully at the above example, you can see that the cats are actually masked differently in the tiles than in the game hexgrid, which I think is counter to expectations.

I think there might be two issues / concerns here:

• pass on the correct hexagon size to pattern and image
• or just let pattern create a viewBox, which should obviate the need for passing around sizes, as in: https://stackoverflow.com/posts/22886596