SVG dasharray的长度不能随着更大的屏幕尺寸而扩大

Question

我有一些动画svg插图，当用户滚动到它们时会在视口的宽度上绘制。

它们在常规屏幕尺寸下效果很好，但是我的同事2560x1440显示器未将SVG虚线数组显示为正确的长度。描述它的最好方法是只显示它：

从MacBook视网膜显示屏上：

更宽的显示屏：

我有一个脚本来测量页面上路径的长度：

let lineLength = this.getTotalLength()
$(this).css('stroke-dasharray', lineLength)
$(this).css('stroke-dashoffset', lineLength)

无论视口宽度如何，上面说明的SVG始终设置为2138.14px的破折号数组。

上述示例的SVG标记：

<svg focusable="false" class="illustration illustration--full" data-il="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1810 124.7">
  <path vector-effect="non-scaling-stroke" data-path="main" d="M1.9 82.6S212-18.5 313.9 10.4s78.6 118.6 14.8 112c-63.8-6.6-38.8-157.6 208.5-112s334.7 105.9 561.1 45.3 447.2-90.6 709.8 40.1" />
</svg>

编辑：我刚刚放下了non-scaling-stroke标记，这似乎已经解决了这个问题，但是现在这给我带来了非比例行程设置正在修复的问题...

Answer 1

结果是，当我在我的SVG中添加vector-effect="non-scaling-stroke"来使笔触保持相同的粗细（有些增长以填满页面而其他没有增长）时，这会影响的缩放长度插图随着填充视口而逐渐增加笔触。

从填充视口的SVG中删除此标签，但将其留在没有填充的矢量上，并且笔触粗细不一致是可以接受的。