CODEWITHSUNDEEP
csssvgfrontendstroke-dasharray
Jimmy Rowe
Jimmy Rowe

Reputation: 41

How can I achieve a percentage-based line length on an SVG with stroke-dasharray?

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

Upvotes: 3

Views: 2551

Answers (2)

Gaddy Evans
Gaddy Evans

Reputation: 71

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

Upvotes: 3

Alexandr_TT
Alexandr_TT

Reputation: 14545

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>

Upvotes: 2

Related Questions