主页 / 问题 / 1237433
Accepted
Проста Miha
Asked:2022-01-29 18:48:16 +0000 UTC2022-01-29 18:48:16 +0000 UTC

如何在 div 中将路径大小设置为 100% x 100%

  • 772

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>

html

1 个回答

  1. Best Answer

    <path />您不太可能设置尺寸的尺寸，但您可以设置矩形<rect />。在这种情况下，您需要考虑到 svg 元素的笔画在其实际边框的两侧延伸。那些。如果笔画粗细为 2px，则 1px 将在元素内部，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>

    • 2

相关问题