react-hexgrid
react-hexgrid copied to clipboard
patterns and images do not inherit proper sizing from hexagons
trafficstars
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