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

Html – Make svg with single line path fill up 100% width of parent

How to make the svg with a single <path> tag making a horizontal line fill up the entire width of the parent container of the svg.

https://codesandbox.io/s/charming-goldstine-wh7td4?file=/src/index.tsx

    .container {
      width: 400px;
      height: 100px;
      background: rgba(0, 0, 255, 0.2);
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      stroke: black;
      stroke-width: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    svg path {
      width: 100%;
      height: 100%;
    }
          <h4>
            Line should fill 100% width of the container of the svg. (the svg should be absolute
            positioned)
          </h4>
          <div class="container">
            <svg viewBox="0 0 1000 1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M 0,0 H 100%"
                // d="M 0, 5 L 100, 5"
              />
            </svg>
          </div>
Tags:

2

Answers


  1. 0

    You can set it to 100% by modifying d="M 0,0 H 100%".

    For example, here I want to be 90% so I use: d="M 0,0 H 900%"

    p.s: the percentage is relevant to with of the viewbox which is the third parameter: viewBox="0 0 1000 1"

    .container {
      width: 400px;
      height: 100px;
      background: rgba(0, 0, 255, 0.2);
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      stroke: black;
      stroke-width: 20px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
    }
    svg path {
      width: 100%;
      height: 100%;
    }
    <h4>
            Line should fill 100% width of the container of the svg. (the svg should be absolute
            positioned)
          </h4>
          <div class="container">
            <svg viewBox="0 0 1000 1" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M 0,0 H 900%"
                // d="M 0, 5 L 100, 5"
              />
            </svg>
          </div>
    Login or Signup to reply.
  2. 0

    As commented by enxaneta:
    <path> elements can’t use percentage values
    unlike primitives like <line> , <rect>, <circle>, <ellipse>.

    See "9.3.2. Specifying path data: the ‘d’ property"

    So the obvious solution would be to use a <line> element instead.

    * {
  box-sizing: border-box;
}

.container {
  width: 400px;
  height: 100px;
  background: rgba(0, 0, 255, 0.2);
  position: relative;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

svg path {
  width: 100%;
  height: 100%;
}
    <div class="container">
  <svg viewBox="0 0 1000 1" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="100%" y2="0" />
</svg>
</div>

<h3>No viewBox - fluid width</h3>
<div class="container" style="width:100%;  margin:1em 0; resize:both; overflow:auto; padding:1em; border:1px solid #ccc">
  <svg width="100%" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="100%" y2="0" />
</svg>
</div>


<h3>
  Don't preerve Aspect ratio - don't scale stroke-widths
</h3>
<div class="container" style="width:100%;  margin:1em 0; resize:both; overflow:auto; padding:1em; border:1px solid #ccc">
  <svg viewBox="0 0 1000 1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" >
              <path vector-effect="non-scaling-stroke"
                d="M 0,0 H 1000"
              />
            </svg>
</div>

    You might also use <line> elements for fluid layout width – omitting the <viewBox> (See 2nd example)

    If you really need to use <path> you might also apply preserveAspectRatio="none" and vector-effect="non-scaling-stroke" to get a similar behavior. (3rd example=

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search