CODEWITHSUNDEEP
csssvgborderclip
jamland
jamland

Reputation: 971

How to clip border partially with CSS (or SVG)?

I want to clip border of div which have some border-radius to imitate how timer expires.
But can't find any way to do it except like with clip-path: polygon(...)
But building custom polygon seems like really hard way to control border length.

Is there some simpler/ more elegant way to do it with CSS (or maybe SVG)?
Here is image of desirable result with few states ⇩⇩

border clip

Upvotes: 0

Views: 2193

Answers (3)

Alex Finger
Alex Finger

Reputation: 31

I think that you do not need to animate the offset in this case. In the case of passing through the zero point as well as if you want to start not from the zero point problems may arise. I would use 2 parameters - the stroke length and the stroke space, like:

<animate attributeName="stroke-dasharray" from="0 600" to="600 0" />

Upvotes: 0

Alexandr_TT
Alexandr_TT

Reputation: 14585

CSS+SVG

This example is exactly the same as the first example, but the styles of the display style are transferred to an external stylesheet. More information on the drawing technique can be found here - Chris Coyier - stroke-dashoffset

You correctly noticed that the length of the line can be calculated using the JS method - getTotalLength ()

Here is an example of a script that prints the length of the path for figures drawn with path: 

<script>
  function TotalLength(){
   var path = document.querySelector('#check');
   var len = Math.round(path.getTotalLength() );
    alert("Path length - " + len);
        };
  </script>

Below is a complete example of animation: 

#rect1 {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 600;
  }
  to {
    stroke-dashoffset: 0;
  }
} 
#rect1 {
fill:#E0E9F6;
stroke-width:4;  
stroke:grey;
}
<svg version="1.1" id="map_line_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300" >

    <rect id="rect1" x="50" y="100" width="200" height="100" rx="50"  />
</svg>

If you need an animation of the movement of the line in one direction, replace the alternate with forwards

Upvotes: 2

Alexandr_TT
Alexandr_TT

Reputation: 14585

pure svg

The effect of drawing a line is achieved using the attribute of the line stroke-dashoffset, which is an indent from the beginning of the line.

The line is hidden when stroke-dashoffset has a maximum value and is fully visible whenstroke-dashoffset = "0"

Therefore, changing the value of stroke-dashoffset from max to zero, we get the effect of drawing the line.

<svg version="1.1" id="map_line_svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300" viewBox="0 0 300 300" >

    <rect x="50" y="100" width="200" height="100" rx="50" fill="#E0E9F6" stroke-width="4"  stroke="grey" stroke-dashoffset="600" stroke-dasharray="600">
	<animate attributeName="stroke-dashoffset" begin="1s" from="600" to="0" dur="7s" repeatCount="indefinite" />
	</rect>

</svg>

Upvotes: 4

Related Questions