search

Yoctol / react-d3-cloud

A word cloud react component built with d3-cloud.
https://yoctol.github.io/react-d3-cloud
MIT License
142 stars 47 forks source link

Responsive aka viewBox attribute #95

Closed soukupl closed 3 years ago

soukupl commented 7 years ago

Hello, would you please consider switching from width and height attributes of <svg> element to viewBox attribute (optionally / default) so the resulting <svg> is responsive?

So, instead of: <svg width="300" height="300">...</svg>

it would be like this: <svg viewBox="0 0 300 300" preserveAspectRatio="xMidYMid meet">...</svg>

This would change the SVG canvas to be fully responsive and handled by browser. You will have your canvas set to specific "pixels" but it can be rendered at any width and height (with the same ratio) and allow browser to scale it for full responsive behavior.

more info: https://css-tricks.com/scale-svg/

abbeyseto commented 5 years ago

Yes, i quite agree. i have a challenge making the wordclout fit into the parent container because i cannnot set the viewbox attribute.