Html Question posted in
Some basic documentation can be found here.

Html – SVG not taking full width of container div

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 no text and icon

Image with text and icon — big parent div

Image with text and icon

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>
Tags:

2

Answers


  1. 0

    Certainly! Here’s how you can address the issue of an SVG with a path smaller than its viewBox, along with a concise alternative text suggestion:

    SVG Adjustment:
    Inspect SVG Path: Open the SVG file and ensure the path or graphic inside is correctly positioned within its viewBox coordinates.

    Adjust viewBox: Modify the viewBox attribute to snugly fit around the edges of your graphic. For example, if your graphic’s dimensions are 100×100 starting at coordinates 10,10, use viewBox="10 10 100 100"

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search