css - SVG dasharray 长度不会随着屏幕尺寸的增大而增加

Question

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

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

从我的 MacBook 视网膜显示屏:

更宽的显示:

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

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

无论视口(viewport)宽度如何，上图所示的 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 标签，这似乎已经解决了这个问题，但它现在留给我的问题是 non-scaling-stroke 设置正在修复...

Answer 1

事实证明，当我将 vector-effect="non-scaling-stroke" 添加到我的 SVG 中以保持笔画粗细相同时(有些会增长以填满页面，有些会不要)，这会影响笔划的缩放长度，因为插图会逐渐填充视口(viewport)。

从填充视口(viewport)的 SVG 中删除了此标签，但将其保留在不填充视口(viewport)的矢量上，笔划粗细不一致是可以接受的。