SVG dasharray length is not scaling up with larger screen sizes

0
votes

I have some animating svg illustrations that draw in across the width of the viewport as the user scrolls to them.

They work great at regular screensizes, however, my colleagues 2560x1440 monitor is not showing the SVGs dasharray to the correct length. The best way to describe it is to just show it:

From my MacBook retina display: enter image description here

Wider display: enter image description here

I have a script measuring the length of the paths on the page:

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

The SVG illustrated above is always being set a dasharray of 2138.14px regardless of the viewport width.

SVG markup for the example above:

<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>

EDIT: I just dropped off the non-scaling-stroke tag and this appears to have resolved this issue, but it now leaves me with the problem that the non-scaling-stroke setting was fixing...

1
csssvgpath
Can you add the svg code or at least a link to a demo? – enxaneta
Just added the SVG markup with a potential solve regarding the use of non-scaling-stroke. But this now leaves me with the inconsistent stroke weights issue I was having before. – Jay

1 Answers

0
votes

Turns out that when I added vector-effect="non-scaling-stroke" to my SVGs to keep the strokes the same thickness (there are some that grow to fill the page and others that do not), this had an affect on the scaling length of the strokes as the illustrations grew to fill the viewport.

Removed this tag from the SVGs that fill the viewport but left it on the vectors that do not and the stroke weight inconsistencies are acceptable.