Как мне сделать path размером 100% на 100% в div

Question

svg{
            width: 400px;
            height: 100px;
        }

        #chain_st{
            -webkit-animation: dash 1s infinite linear;
            -moz-animation: dash 1s infinite linear;
            -o-animation: dash 1s infinite linear;
            animation: dash 1s infinite linear;
        }

        @keyframes dash{
            to{ 
                stroke-dashoffset: -5; 
            }
        }

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: royalblue;
        }

        .block{
            height: 400px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

<div class="block">
            <svg viewbox="0 0 100 40">
                <path id="chain_st" stroke="black" fill="transparent" stroke-dasharray="2.6 2.45" d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89 26.5 89 13.5 80.8 13.5z">
            </svg>
    </div>

Answer 1

Для <path /> размеры задать врядли получится, а вот прямоугольнику <rect /> - можно. При этом нужно учитывать, что обводка svg-элемента распространяется по обе стороны от его реальной границы. Т.е. если толщина обводки будет 2px, то 1px будет внутри элемента, а один - снаружи.

* {
  box-sizing: border-box;  
}
body{
  margin: 0;
  background-color: royalblue;
}
.btn{
  display: block;
  margin: 20px auto 0;
  width: 200px;
  height: 50px;
}
.btn--big{
  width: 400px;
  height: 100px;
}
.btn__border {
  fill: transparent;
  stroke: #000;
  stroke-width: 2px;
  stroke-dasharray: 2.6px 2.45px;
  vector-effect: non-scaling-stroke;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  -webkit-animation: dash 1s infinite linear;
  -moz-animation: dash 1s infinite linear;
  -o-animation: dash 1s infinite linear;
  animation: dash 1s infinite linear;
}

@keyframes dash {
  to {
    stroke-dashoffset: -5;
  }
}

<div class="block">
  <svg class="btn">
    <rect width="98%" height="98%" x="1" y="1" rx="20" ry="20" class="btn__border" />
  </svg>  
  <svg class="btn btn--big">
    <rect width="98%" height="98%" x="1" y="1" rx="20" ry="20" class="btn__border" />
  </svg>
</div>

БЛОГ НА HUSL

Как мне сделать path размером 100% на 100% в div

Ответы (1 шт):