SVG not taking full width of container div

Question

Facing issue where SVG is not taking full width of parent div.

I've tried updating the viewBox and adding width and height attributes to the SVG, but neither approach has worked.

My requirement,

I want this SVG colour to change dynamically. -- ✔
I want this SVG to have dynamically text inside it. -- ✔

I have already achieved these tasks as shown in the code snippet.

I'm facing these two issues,

I need an icon, e.g. pencil icon, to be positioned next to the text within middle of the SVG. -- ❌
Now the biggest problem, the SVG must automatically adjust to the width of the parent div, as shown in the attached images. -- ❌

Image with no text and icon -- small parent div

Image with text and icon -- big parent div

I've tried this SO reference but it didn't worked out - SVG is not talking FULL 'width' of container

<div style="width:100%; height: 128px; border:1px dashed black;"> 
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 128" preserveAspectRatio="none">
    <g transform="translate(0.000000,128.000000) scale(0.050000,-0.050000)" fill="#0000FF" stroke="none">
      <path d="M358 1627 l352 -352 -347 -348 -348 -347 920 0 920 0 348 348 347 347 -353 353 -352 352 -920 0 -920 0 353 -353z"/>
    </g>
    <text x="128" y="64" font-family="Arial" font-size="10" fill="white" text-anchor="middle" alignment-baseline="middle">Updated SVG</text>
  </svg>
</div>

Your SVG is wrong. U need only the middle part to grow not also the arrows (in, and out) otherwise u will have a stretched SVG with a long white V and a narrow blue V... — D A
– D A, Commented Jul 1, 2024 at 13:10
The svg do take the full width of the parent div. You can check by giving the svg a background color. The problem you have is that the viewBox is way wider than the shape inside. — enxaneta
– enxaneta, Commented Jul 1, 2024 at 13:11
@DA, how will I grow the middle part of SVG do you have any reference? — Utkarsh Dubey
– Utkarsh Dubey, Commented Jul 1, 2024 at 13:18
I think U need that SVG to split it to 3 SVGs in fact. Static tail and front SVG and middle rectangle SVG that will grow... — D A
– D A, Commented Jul 1, 2024 at 13:24

JayCravens · Accepted Answer · 2024-07-01 14:50:09Z

As @D A's comment says, this is probably the most flexible way to do it.
It will ensure easy modification.

    .breadcrumb-container {
      display: flex;
      align-items: center; /* aligns the middle vertically */
      height: 40px; /* fixed height */
    }

    .breadcrumb-tail,
    .breadcrumb-head,
    .breadcrumb-body {
      display: flex;
      align-items: center; /* vertical centering */
      justify-content: center; /* horizontal centering */
      height: 40px; /* fixed height */
      background: #0000ff; /* same color for all parts */
    }

    .breadcrumb-tail {
      --s: 20px; /* control the shape */
      line-height: 1.8; /* control the height */
      padding-inline: calc(var(--s) + 0.3em) 0.3em;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--s) 50%);
      width: 40px; /* adjust width */
    }

    .breadcrumb-body {
      width: 100px; /* adjust width */
    }

    .breadcrumb-head {
      --s: 20px; /* control the shape */
      line-height: 1.8; /* control the height */
      padding-inline: .3em calc(var(--s) + .3em);
      clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%);
      width: 40px; /* adjust width */
    }

    .breadcrumb-body span {
      color: white; /* text color */
    }

<!DOCTYPE html>
<html>
<head>
  <title>SVG</title>
<body>
  <div class="breadcrumb-container">
    <div class="breadcrumb-tail"></div>
    <div class="breadcrumb-body"><span>Updated SVG</span></div>
    <div class="breadcrumb-head"></div>
  </div>
</body>
</html>

Collectives™ on Stack Overflow

SVG not taking full width of container div

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related