我有一个内联 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;
}
}
这是我的代码的 fiddle 。
最佳答案
您必须告诉 SVG 不要在 SVG 代码中使用 preserveAspectRatio="none"
来保持其宽高比..然后它只是 CSS。
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>
关于html - 使 SVG 路径占据屏幕的整个宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32611745/