Extend svg path to 100% width-CodePudding

How do I make the path in a SVG extend to 100% width and height of the svg? I'm trying to get the black leaf in the blue container expand.

<div style="background-color: red;">
  <svg viewBox="0 0 2000 4000" style="background-color: blue; align-content: center;">
    <path
      d="M292.724 23.7046 C547.323 146.803 192.925 436.042 192.925 436.042 C192.925 436.042 -159.18 147.575 90.3928 24.1984 C153.361 -6.92989 229.486 -6.87104 292.724 23.7046Z"
      fill="black"
    />
  </svg>
</div>

One horrific way to handle this is like so:

<div style="background-color: red;">
  <svg viewBox="0 0 1080 1920" style="background-color: blue; transform: scale(1)">
    <path
      transform="translate(348 737)"
      d="M292.724 23.7046 C547.323 146.803 192.925 436.042 192.925 436.042 C192.925 436.042 -159.18 147.575 90.3928 24.1984 C153.361 -6.92989 229.486 -6.87104 292.724 23.7046Z"
      fill="black"
    />
  </svg>
</div>

Where transform="translate(348 737)" is in fact transform="translate(viewBoxWidth / 2 - pathWidth / 2 viewBoxHeight / 2 - pathHeight / 2"

Although this will allow control of the path size relative to the viewBox and easy way to keep it centered while scaling, it is ugly and hard to understand.

I'm hoping someone may have a better solution.

CodePudding user response：

This is how you do this properly:

<div style="position: absolute; inset: 0px; width: 100%; height: 100%; display: flex; flex-direction: column;">     <div style="background-color: red;">
    <div style="position: absolute; inset: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; background-color: pink; justify-content: center; align-items: center;">
      <svg viewBox="0 0 384 446" fill="none" xmlns="http://www.w3.org/2000/svg" width="384" height="446">
        <g style="transform-origin: center center; transform-box: fill-box;">
          <path d="M292.724 23.7046C547.323 146.803 192.925 436.042 192.925 436.042C192.925 436.042 -159.18 147.575 90.3928 24.1984C153.361 -6.92989 229.486 -6.87104 292.724 23.7046Z" fill="black"></path>
        </g>
      </svg>
    </div>
  </div>
</div>

CodePudding user response：

There could be different approaches.

Example 1

Adjust the viewbox to the size of the content. Here the viewbox is "1 0 384.78 435.23" because the shape is 383.78 wide and 435.23 tall. The x value is 1 because the leaf is placed a bit to the right.

<div style="background-color: red;">
  <svg viewBox="1 0 384.78 435.23"
    style="display:block;background-color: blue; align-content: center;">
    <path
      d="M292.724 23.7046 C547.323 146.803 192.925 436.042 192.925 436.042 C192.925 436.042 -159.18 147.575 90.3928 24.1984 C153.361 -6.92989 229.486 -6.87104 292.724 23.7046Z"
      fill="black"
    />
  </svg>
</div>

Example 2

If you would like to keep the viewbox of the SVG ("0 0 2000 4000") you can place an SVG element inside the SVG element. The path is a child of the second SVG element that has a matching viewbox (the size of the path). The path will scale to the width (or height) of the outer SVG element.

<div style="background-color: red;">
  <svg viewBox="0 0 2000 4000"
    style="display:block;background-color: blue; align-content: center;">
    <svg viewbox="1 0 384.78 435.23">
      <path
        d="M292.724 23.7046 C547.323 146.803 192.925 436.042 192.925 436.042 C192.925 436.042 -159.18 147.575 90.3928 24.1984 C153.361 -6.92989 229.486 -6.87104 292.724 23.7046Z"
        fill="black"
      />
    </svg>
  </svg>
</div>

Example 3

If you would like the leaf to fill the entire SVG it can be stretched using preserveAspectRatio none on the inner SVG element (and this could also be used in combination with example 1).

<div style="background-color: red;">
  <svg viewBox="0 0 2000 4000"
    style="display:block;background-color: blue; align-content: center;">
    <svg viewbox="1 0 384.78 435.23" preserveAspectRatio="none">
      <path
        d="M292.724 23.7046 C547.323 146.803 192.925 436.042 192.925 436.042 C192.925 436.042 -159.18 147.575 90.3928 24.1984 C153.361 -6.92989 229.486 -6.87104 292.724 23.7046Z"
        fill="black"
      />
    </svg>
  </svg>
</div>

I add the style display: block for all the examples because SVGs are inline elements as default. My guess is that you would like to "get rid of" the red background.