2

I'm trying to achieve a percentage-based border-like effect on an SVG rect element, like the one shown in the image below. I've been advised that I need to use stroke-dasharray in order to do this, but despite playing around with a JSFiddle, I've been unable to find a solution that works universally for SVGs of any height and width. Any help or advice would be appreciated.

Here's what I'm currently playing around with in a JSFiddle:

<html>
  <body>
    <div>
      <svg>
        <rect
          x="10"
          y="10"
          rx="10"
          ry="10"
          height="48"
          width="48"
          stroke-dasharray="50% 100%"
          style="stroke: black; fill: none;"
        />
      </svg>
    </div>
  </body>
</html>

Image of desired functionality

Jimmy Rowe
  • 31
  • 4

2 Answers2

2

As @enxaneta commented, the total path length can be found using the getTotalLength() method 

<html>
  <body>
    <div>
 <input  type="button" value="Total"  onclick="TotalLength()"/>
      <svg width="20%" height="20%" viewBox="0 0 60 60">
        <rect id="rect"
          x="10"
          y="10"
          rx="10"
          ry="10"
          height="48"
          width="48"
          style="stroke: black; fill: none;"
        />
      </svg>
    </div> 
 <script>
  function TotalLength(){
          var path = document.querySelector('#rect');
        var len = (path.getTotalLength() );
        alert("Path length - " + len);
        };
  
 </script>
  </body>
</html>

The total path length is : 174.42px

The stroke-dasharray attribute is a presentation attribute defining the pattern of dashes and gaps used to paint the outline of the shape;

When filling the figure by 64%, we calculate the stroke length: 174.42 * 0.64 = 111.62

Gaps length: 174.42 * 0.36 = 62.79 stroke-dasharray = 111.62, 62.79 

<html>
  <body>
    <div>
   <svg width="20%" height="20%" viewBox="0 0 60 60">
        <rect id="rect"
          x="10"
          y="10"
          rx="10"
          ry="10"
          height="48"
          width="48"
          stroke-dasharray="111.62, 62.79"
          style="stroke: black; fill: none;"
        /> 
    <text x="20" y ="40" font-size="16px" > 64% </text>
      </svg>
    </div> 
 
  </body>
</html>
Alexandr_TT
  • 13,635
  • 3
  • 27
  • 54
1

In this case, it is easiest to use the pathLength attribute with a value of 100. Then just define the stroke-dasharray attribute with a value that corresponds to the percentage of the desired length.

More info about pathLength at MDN Web Docs.

<html>
  <body>
    <div>
      <svg>
        <rect 
          x="10" y="10" rx="10" ry="10" 
          height="48" width="48" 
          pathLength="100" 
          stroke-dasharray="50" 
          stroke="#000"
          fill="none" />
      </svg>
    </div>
  </body>
</html>

No need to use Javascript :)

Gaddy Evans
  • 41
  • 2