Question

我有一个SVG路径，它是屏幕的全宽和高度。调整屏幕大小时，笔划的宽度会变得很大。我认为这与preserveAspectRatio属性有关。

有没有什么可以阻止中风伸展？

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

中的代码

Answer 1

矢量效应：“非缩放中风”;

似乎可以解决问题

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”＆lt; - 因为这会产生瞪眼 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>

SVG路径延伸

1 个答案:

矢量效应：“非缩放中风”;