html - SVG路径被拉长

我有一个SVG路径，它是屏幕的全宽和全高。调整屏幕大小时，笔划的宽度将被拉伸。我认为这与preserveSpectratio属性有关。
有什么可以防止中风被拉伸的吗？
HTML格式

<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" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve" preserveAspectRatio="none">
    <path class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-width="5" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" stroke-dasharray="2042 300" stroke-dashoffset="2342" vector-effect="non-scaling-stroke"/>
</svg>

CSS

html, body {
    margin: 0;
    height: 100%;
}
svg {
    display: block;
    position: absolute;
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
}
.path {
    animation: dash 10s linear infinite;
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

以下是jsfiddle中的代码

最佳答案

矢量效果：“非缩放笔划”；
好像是在耍花招

html,
body {
  margin: 0;
  height: 100%;
}
svg {
  display: block;
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
}
.path {
  vector-effect: "non-scaling-stroke";
  stroke-width: 20px;
  animation: dash 10s linear infinite;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@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" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve" preserveAspectRatio="none">
  <path preserveAspectRatio="none" class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" stroke-dasharray="2042 300" stroke-dashoffset="2342" vector-effect="non-scaling-stroke" />
</svg>

为什么中风会有间隙？
stroke dasharray=“2042 300”stroke dasharray=“2042 300”您希望差距有多大？
完整的形状？
stroke dasharray=“2042 2042”：p创建一个笔划“绘制”形状的错觉。

html,
body {
  margin: 0;
  height: 100%;
}
svg {
  display: block;
  position: absolute;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
}
.path {
  stroke-width: 20px;
  animation: dash 10s linear infinite alternate;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@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" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve" preserveAspectRatio="none">
  <path preserveAspectRatio="none" class="path" width="100%" height="100%" fill="none" stroke="#00ff00" stroke-miterlimit="10" d="M656.5,2.5v517H2.5V2.5H656.5z" stroke-dasharray="2042 2042" stroke-dashoffset="2342" vector-effect="non-scaling-stroke" />
</svg>