For my personal project, I am creating a simple react webpage. To incorporate zoom capabilities, I decided to use the library called React-zoom-pan-pinch. Initially, without implementing this library, my SVG element filled the screen in red, which was the desired behavior as I wanted it to be as large as possible.
https://i.sstatic.net/jhrdsm.png
However, after adding the new code using the library, the outcome looked like this:
https://i.sstatic.net/2Csudm.png
Here is the snippet of the code:
<TransformWrapper
defaultScale={1}
defaultPositionX={0}
defaultPositionY={0}
>
<TransformComponent>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
viewBox={"0 0 1024 792"}
>
...insert svg content here
</svg>
</TransformComponent>
</TransformWrapper>
I've attempted various CSS tricks and workarounds to resolve the issue but none seemed to work effectively. Upon examining the library's CSS, I discovered three specific rules that were causing the problem. Removing all three rules in my development tools allowed the SVG to return to its full size.
.container {
width: fit-content;
...
}
.content {
display: flex;
width: fit-content;
...
}
Although I lack expert knowledge in CSS, upon further research, I found these rules should not have been responsible for the mentioned behavior. Can someone provide insight into what might be happening and suggest the best methods for resolving it? While I manually unset the width: fit-content and retained display: flex, I also enclosed my SVG within a div with flex-grow:1. Nonetheless, understanding why the issue occurred initially would still be beneficial.
Update
After removing the manual override of width: fit-content and maintaining display: flex, wrapping the SVG in a div with flex-grow:1 resolved the issue. Nevertheless, I remain curious about the root cause of the initial problem.