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

【问题标题】：SVG dasharray length is not scaling up with larger screen sizesSVG dasharray 长度不会随着更大的屏幕尺寸而扩大
【发布时间】：2020-01-01 10:27:27
【问题描述】：

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

它们在常规屏幕尺寸下工作得很好，但是，我的同事 2560x1440 显示器没有将 SVG dasharray 显示为正确的长度。描述它的最佳方式就是展示它：

从我的 MacBook 视网膜显示屏：

更宽的显示：

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

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

无论视口宽度如何，上图所示的 SVG 始终被设置为 2138.14px 的 dasharray。

上述示例的 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 标签，这似乎已经解决了这个问题，但现在它给我留下了一个问题，即非缩放笔画设置正在修复......

【问题讨论】：

你能添加 svg 代码或至少一个演示链接吗？
刚刚添加了 SVG 标记，可能会解决有关使用 non-scaling-stroke 的问题。但这现在给我留下了我以前遇到的笔画权重不一致的问题。

标签： css svg path

【解决方案1】：

事实证明，当我将vector-effect="non-scaling-stroke" 添加到我的 SVG 以保持笔触相同的粗细时（有些会增长以填充页面，而另一些则不会），这会影响笔划的缩放长度随着插图逐渐填满视口。

从填充视口的 SVG 中删除了此标记，但将其保留在未填充的矢量上，并且笔画粗细不一致是可以接受的。

【讨论】：