SVG 动画没有按预期工作

Question

我正在处理 SVG 动画，我想使用 svg stroke 动画绘制一个矩形。这是我的代码。

.path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 100;
  animation: dash 5s linear infinite;
}

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

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  width="500px" height="500px" viewBox="100 300 500 600" enable-background="new 0 0 340 333" xml:space="preserve"><path id="XMLID_348_" class="st0 laptop-outer path" d="M523.9,704.5H119.3c-9.1,0-16.5-7.1-16.5-15.8V449.5c0-14.1,12-25.6,26.8-25.6h384.2     c14.8,0,26.8,11.5,26.8,25.6v239.1C540.5,697.4,533.1,704.5,523.9,704.5z M129.5,425.5c-13.9,0-25.2,10.8-25.2,24.1v239.1 c0,7.9,6.7,14.3,15,14.3h404.6c8.2,0,15-6.4,15-14.3V449.5c0-13.3-11.3-24.1-25.2-24.1H129.5z" stroke="#000000" stroke-width="4" /></svg>

我想从一个点到最后一个点绘制一个矩形，但它没有像我预期的那样工作。

Answer 1

您可以考虑更简单的 SVG 路径：

path {
  fill: transparent;
  stroke: #000;
  stroke-dasharray: 212;
  stroke-dashoffset: 212;
  animation: dash 5s linear forwards;
}

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

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='200'>
  <path stroke-width=0.5 d='M0 16 L0 32 C0 48 0 48 16 48 L48 48 C64 48 64 48 64 32 L64 16 C64 0 64 0 48 0 L16 0 C0 0 0 0 0 16 Z' />
</svg>

SVG 动画没有按预期工作

SVG animation not working as expected

css

svg

css-animations

svg-animate