Originally Posted by johnsmith153
Basically, I want the green shape to display/fit perfectly inside the red box when I change the browser size.
Several questions need to be answered first:
- What's the preferred initial size of the red box? So far, you've specified
width: 30%;, but it's unclear how tall the red box should initially be.
- What's the preferred initial size of the SVG image? Is it the view box size (400×200 pixels)? Is it the width or height of the red box?
- Is it intentional that your view box is smaller than the SVG image itself (guaranteeing that the bottom of the image will be truncated)?
For every complex problem, there is an answer that is clear, simple, and wrong.