时间戳

首页 > 解决方案 > SVG dasharray 长度不会随着更大的屏幕尺寸而扩大

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

问题描述

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

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

从我的 MacBook 视网膜显示器： 在此处输入图像描述

更宽的显示： 在此处输入图像描述

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

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

上面说明的 SVG 总是被设置为一个 dasharray ，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标签，这似乎已经解决了这个问题，但现在它给我留下了非缩放笔画设置正在修复的问题......

标签： csssvgpath

解决方案

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

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

推荐阅读