1

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"></path>
            </svg>
</div>

1
  • У меня например div размером 600х200, как мне сделать path на 100%х100%, а то у меня никак не получается
    – Miha
    29 янв 2021 в 10:49

1 ответ 1

2

Для <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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.