The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

Question

The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

In my current project, I am utilizing JavaScript to determine the length of a path and apply half of that length to the stroke-DashArray. However, I have encountered an issue as I am using

vector-effect="non-scaling-stroke"

in order to maintain a consistent stroke-width:2px; regardless of scale. This property affects all aspects of the stroke properties, including DashArray, so I need to calculate the scale of the SVG in order to scale path.getTotalLength();.

Is there a method in JavaScript to retrieve the computed scale of the SVG, which I can then use as a multiplier for the path length?

To illustrate this issue, I have created a demo on codepen.io. Feel free to resize the viewport to observe the changes in the stroke.

javascript css svg responsive

Answer 1

Answer №1

Let's highlight Sam's insightful comment/answer that really helped me!

To calculate the scale number, try using path.getBoundingClientRect().width/path.getBBox().width

To determine the length of the path, simply multiply the scale by path.getTotalLength() * scale;

Answer 2

Let's highlight Sam's insightful comment/answer that really helped me!

To calculate the scale number, try using path.getBoundingClientRect().width/path.getBBox().width

To determine the length of the path, simply multiply the scale by path.getTotalLength() * scale;

Answer 3

Answer №2

If you're having trouble with scaling your svg, the solution mentioned above didn't work for me either. This is probably because my svg isn't proportionally sized (it's set to fill the browser window). However, I found a simple fix using boundingClientRect and the pythagorean theorem:

let boundingClient = el.getBoundingClientRect();
let pathLength = Math.sqrt(boundingClient.width ** 2 + boundingClient.height ** 2);

This method worked perfectly for me and just requires recalculating whenever the window size changes.

Answer 4

If you're having trouble with scaling your svg, the solution mentioned above didn't work for me either. This is probably because my svg isn't proportionally sized (it's set to fill the browser window). However, I found a simple fix using boundingClientRect and the pythagorean theorem:

let boundingClient = el.getBoundingClientRect();
let pathLength = Math.sqrt(boundingClient.width ** 2 + boundingClient.height ** 2);

This method worked perfectly for me and just requires recalculating whenever the window size changes.

Answer 5

Answer №3

In my opinion, the best approach is to calculate the viewbox size by dividing it with the SVG width.

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head> 
  <body>
    <button onclick="dashAni(myPath, 50, 3500)">start</button>
    <svg id="mySVG"  width="200" height="200" viewBox="0 0 500 500">
        <path 
        vector-effect="non-scaling-stroke"
        id="myPath" d="M 50,250 c 0 -100   150 -100   200 0 
                                      c 50 100   200 100   200 0
                                      c -0 -100   -150 -100   -200 0
                                      c -50 100   -200 100   -200 0
                                      z" 
        stroke="#eee"
        stroke-width="5" fill="none" />
    </svg>
    <script>
      var dashAni = function(path, length, duration){
        var dashPath = path.cloneNode(true);
        mySVG.appendChild(dashPath);
        var pathLen=path.getTotalLength()/2.5;  
        var aktPos=0
        var sumSteps = duration / (1000/60) // 60 pics per second
        var step=0;
        var pathAnim;
        dashPath.setAttribute('stroke-dasharray', length + ' ' + (pathLen - length));
        dashPath.setAttribute('stroke', "red");
        dashPath.setAttribute('stroke-dashoffset', aktPos);

        var anim=function(){
           aktPos = pathLen/sumSteps*step*-1;
            //aktLen = easeInOutQuad(step/sumSteps)*len;
           dashPath.setAttribute('stroke-dasharray', length + ' ' + pathLen);
           dashPath.setAttribute('stroke-dashoffset', aktPos);

           if (step <= (sumSteps)){
            step++;
            pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
            } else {
              mySVG.removeChild(dashPath);
              clearTimeout(pathAnim);
            }
        }
       anim();
      }
    </script>
  </body>
  </html>

Answer 6

In my opinion, the best approach is to calculate the viewbox size by dividing it with the SVG width.

  <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head> 
  <body>
    <button onclick="dashAni(myPath, 50, 3500)">start</button>
    <svg id="mySVG"  width="200" height="200" viewBox="0 0 500 500">
        <path 
        vector-effect="non-scaling-stroke"
        id="myPath" d="M 50,250 c 0 -100   150 -100   200 0 
                                      c 50 100   200 100   200 0
                                      c -0 -100   -150 -100   -200 0
                                      c -50 100   -200 100   -200 0
                                      z" 
        stroke="#eee"
        stroke-width="5" fill="none" />
    </svg>
    <script>
      var dashAni = function(path, length, duration){
        var dashPath = path.cloneNode(true);
        mySVG.appendChild(dashPath);
        var pathLen=path.getTotalLength()/2.5;  
        var aktPos=0
        var sumSteps = duration / (1000/60) // 60 pics per second
        var step=0;
        var pathAnim;
        dashPath.setAttribute('stroke-dasharray', length + ' ' + (pathLen - length));
        dashPath.setAttribute('stroke', "red");
        dashPath.setAttribute('stroke-dashoffset', aktPos);

        var anim=function(){
           aktPos = pathLen/sumSteps*step*-1;
            //aktLen = easeInOutQuad(step/sumSteps)*len;
           dashPath.setAttribute('stroke-dasharray', length + ' ' + pathLen);
           dashPath.setAttribute('stroke-dashoffset', aktPos);

           if (step <= (sumSteps)){
            step++;
            pathAnim = setTimeout(anim, 1000/60) //1000/60 pics/second
            } else {
              mySVG.removeChild(dashPath);
              clearTimeout(pathAnim);
            }
        }
       anim();
      }
    </script>
  </body>
  </html>

The getTotalLength() method in SVG may not provide an accurate size measurement when dealing with non-scaling-stroke. To obtain the correct scale of

Answer №1

Answer №2

Answer №3

Similar questions

Replacing HTML text with JSON data can be easily achieved by using JavaScript

Having trouble generating a readable output bundle due to the following error message: "The entry module cannot be found: Error: Unable to resolve './src/index.js'"

Creating a React table with customizable columns and rows using JSON data sources

"Encountered a TypeError: Cannot read property 'params

My Angular JS http.get request is failing to reach the specified URL

When scrolling down a webpage, the background color of the content does not stretch along with the page

Dynamic sliding box jumps instead of simply fading in/out

Strange formatting in the internet explorer browser (IE)

The property 'label' is not found in the 'string' type in Typescript

When resizing, headers within Bootstrap text fail to adjust accordingly

Arranging divs in a horizontal line while keeping the content organized in a vertical manner within the footer

p5.js experiencing issue: Uncaught TypeError - Unable to access property 'transpose3x3' due to null value

The hierarchy of script loading in Angular applications

Exploring the Depths of NodeJS X-Ray Web-Scraper: Uncovering Hidden Gems within Sub Pages

Styling problem arises on IOS devices due to rounded corners affecting select box

challenging multiple substitution within a sentence

Trigger the fire controller code upon the change of the textbox date in ASP.NET MVC

Attempting to create an OutlinedInput with a see-through border, however encountering strange artifacts

Steps to select an option from a drop-down menu that does not have an ID assigned

Is there a way to efficiently include numerous jQuery scripts in a batch process, each with a slight variation, using a loop?