cssreactjssvgpathviewbox

SVG viewBox="0 0 100 100" wont scale my path to 100%?

I currently have an svg path that only shows about 50%. How can I get it to show 100%? Here is my code:

<div className="svgPathContainer">
   <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
     <path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
  </svg>
</div>

I have className="svgPath" set as:

.svgPathContainer{ 
  width: 100%;
  height: 100%;
}

Here is also an example of the svg only showing at 50%: https://codesandbox.io/s/svg-scaling-fff1q?file=/src/App.js:93-357

The problem: Why wont the svg path scale to 100% of the .svgPathContainer?

Solution

  • The viewBox is like a canvas size. So drawings outside of this view box will be clipped. Like css overflow: hidden. And your drawing has a size of width 123px and height 170px. So you have to change the view box to this value. Check our some docs.

    If you want to keep the viewbox of 100 x 100 px, you need to change your drawing element size (path).

    The view box has nothing to do with the scale. It's just the canvas size. A rect clip with width, height and offset (x y w h) for the SVG elements inside. And the SVG tag's width and height attributes are for scale the rendered image.

    <div className="svgPathContainer">
   <svg width="100%" height="100%" viewbox="0 0 123 170" preserveAspectRatio="none">
     <path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
  </svg>
</div>