Html 使单行路径的 svg 填充父级的 100% 宽度

发布于07月09日

如何使SVG带有一个<path>的标签，使一条水平线填满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>

推荐答案

可以通过修改d="M 0,0 H 100%"%将其设置为d="M 0,0 H 100%"%.

例如，这里我想要为90%，所以我使用:d="M 0,0 H 900%"

附注:百分比与viewbox中的第三个参数相关: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>