Image backgrounds with fallback fill color

[oyeanuj]

Hi @rexxars, firstly - thank you for this excellent component. It is super useful.

For my usecase, I ran into a couple of issues and so I wanted to clarify the usage.

1. I want to display an image in the hexagon with a fallback color to fill it up until the image loads (or in case it fails). I tried the following code which didn't work - it only showed the fill.

   <PictureFrame size = {size}> // Just a container with width and height
   <Hexagon
   backgroundImage = { imageUrl }
   backgroundScale = {1.05}
   style = {{ stroke: "none", fill: colors.backgroundColor }}
   />
   </PictureFrame>

2. I noticed that the Hexagon by default was not being constrained by the width or height of the container. Is that to be expected or a bug? And what would be a good workaround to ensure that the hexagon's height and width never exceed that of the container?

Apologies if I missed something in the docs, and I'd also be glad to make a PR to the docs if something needs to be clarified!

Thank you!

[rexxars]

Hi,

1. I think you'll have to send a pull request to support this. Currently a background image and a background color is mutually exclusive, it seems. Sorry, don't have time to investigate and fix.

2. That seems odd. We use viewBox to define the size, which shouldn't really explicitly set a size, but you might have to apply some CSS (max-width: 100%; max-height: 100%; maybe?) to the SVG for it to be constrained?

Any PRs to docs or code would be appreciated :)

[oyeanuj]

@rexxars Thanks for the quick response! I'd be happy to take a stab if you can provide a little bit of guidance since I'm not very knowledgeable about SVG.

For the first one, it seems like updating the code to set the fill to url only when the image component is ready could be a way to go. That would however require state and the functional component to be converted into a class - is that cool by you?

[oyeanuj]

@rexxars I also played around with your suggestion for the second, and that worked although that illustrated a different problem - that the polygon leaves margins around (see screenshot below). Is that to be expected?

[rexxars]

To be honest, I don't have all that much experience with SVGs either - I made this project because I needed it at the time, and didn't dig too deep. Having said that, from your screenshot it looks like the viewbox has the right aspect ratio, so I assume it's a styling issue again? Sorry, I don't have much time to dig into this right now :/