使 SVG 路径占据屏幕的全宽和全高答案

【问题标题】：Make SVG path take full width and height of screen使 SVG 路径占据屏幕的全宽和全高
【发布时间】：2015-09-16 23:04:20
【问题描述】：

我有一个内联 SVG 路径，它可以使破折号看起来像蛇游戏。现在我的问题是如何让这条路径占据屏幕的整个宽度和高度，并在屏幕变小或变大时做出响应。

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" width="100%" height="100%" viewBox="0 0 659 522" enable-background="new 0 0 659 522" xml:space="preserve">
    <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" />
</svg>

CSS

.path {
    animation: dash 10s linear infinite;
}

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

这是我的代码。

http://jsfiddle.net/c3ar6e5o/

【问题讨论】：

标签： html css svg

【解决方案1】：

您必须告诉 SVG 不要在 SVG 代码中使用 preserveAspectRatio="none" 保持其纵横比。然后它只是 CSS。

JSfiddle Demo

html,
body {
  margin: 0;
  height: 100%;
}
svg {
  display: block;
}
.path {
  animation: dash 10s linear infinite;
}
@-webkit-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="100%" height="100%" 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" />
</svg>

【讨论】：

谢谢这似乎有帮助，唯一的问题是笔画似乎被拉伸了。
在片段中是的......但检查 JSfiddle（现在更正链接）
小提琴对我来说似乎也被拉伸了
嗯……在我看来，在 Chrome 中看起来不错。