3 ms·

If you wanted arbitrary HTML content in the hexagons, would you be able to use SVG? I know you could hack together similar output since SVG supports images, lin

If you wanted arbitrary HTML content in the hexagons, would you be able to use SVG? I know you could hack together similar output since SVG supports images, links, text formatting, etc., but I can see people liking the idea of the hexagonal containers being plain divs that you can put whatever content you want into.

edoceo 6y ago
Putting nice markup (or even OK formatted text) into SVG has been a pain for me. I put an SVG background, then layer the HTML over it. It works but, I'm not happy about it.
- uhoh-itsmaciek 6y ago
  Check out the sibling answer above, you can embed HTML in svg and it generally works well: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
  - edoceo 6y ago
    I'm familiar with those docs. That method was a poor experience for my mobile users. SVG support on mobile is not that great. Sadly FF had the most issues so I'm stuck with my workaround for now.
nybble41 6y ago
You can put arbitrary HTML elements inside an SVG element embedded in an HTML page: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
- chryton 6y ago
  I wonder what the accessibility for html in svg is like. But really, isn't this just an iframe with a different name?
  - chrismorgan 6y ago
    No. An iframe is a separate browsing context which as a developer you can’t interact with perfectly, and is segregated from the rest as a user, which has implications on keyboard interactivity especially. Essentially, <iframe> is an accessibility headache. <foreignObject> is just the opposite of <svg>, so it’s no trouble at all.
Fellshard 6y ago
This example doesn't even show how it would place content inside the grid... and I suspect any attempt to do so with anything more than trivial text excerpts would result in the layout shattering, or the content clipping. And attempting to fit hexagonally-shaped content into the exact elements of the grid seems even less likely, here.
xipho 6y ago
Shameless plug. https://github.com/SpeciesFileGroup/waxy https://github.com/SpeciesFileGroup/waxy is coded based on Red Blob Games' incredible tutorials. We use it for visualizations in Rails.

edoceo 6y ago

Putting nice markup (or even OK formatted text) into SVG has been a pain for me. I put an SVG background, then layer the HTML over it. It works but, I'm not happy about it.

uhoh-itsmaciek 6y ago
Check out the sibling answer above, you can embed HTML in svg and it generally works well: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
- edoceo 6y ago
  I'm familiar with those docs. That method was a poor experience for my mobile users. SVG support on mobile is not that great. Sadly FF had the most issues so I'm stuck with my workaround for now.

nybble41 6y ago

You can put arbitrary HTML elements inside an SVG element embedded in an HTML page: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...

chryton 6y ago
I wonder what the accessibility for html in svg is like. But really, isn't this just an iframe with a different name?
- chrismorgan 6y ago
  No. An iframe is a separate browsing context which as a developer you can’t interact with perfectly, and is segregated from the rest as a user, which has implications on keyboard interactivity especially. Essentially, <iframe> is an accessibility headache. <foreignObject> is just the opposite of <svg>, so it’s no trouble at all.

Fellshard 6y ago

This example doesn't even show how it would place content inside the grid... and I suspect any attempt to do so with anything more than trivial text excerpts would result in the layout shattering, or the content clipping. And attempting to fit hexagonally-shaped content into the exact elements of the grid seems even less likely, here.

xipho 6y ago

Shameless plug. https://github.com/SpeciesFileGroup/waxy https://github.com/SpeciesFileGroup/waxy is coded based on Red Blob Games' incredible tutorials. We use it for visualizations in Rails.