如何使用CSS（或SVG）部分剪裁边框？

Question

我想剪切div的边框，其中有一些border-radius来模仿计时器的到期时间。
但除了clip-path: polygon(...)之外，无法找到任何方法 但是构建自定义多边形似乎是控制边框长度的难题。

用CSS（或SVG）做一些更简单/更优雅的方法吗？ 这是几乎没有状态的理想结果的图像⇩⇩

Answer 1

纯svg

使用行stroke-dashoffset的属性实现绘制线条的效果，该属性是行开头的缩进。

当stroke-dashoffset具有最大值时该行被隐藏，并且在stroke-dashoffset = "0"

时完全可见

因此，将stroke-dashoffset的值从max更改为零，我们会得到绘制线的效果。

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

Answer 2

CSS + SVG

此示例与第一个示例完全相同，但显示样式的样式将传输到外部样式表。有关绘图技术的更多信息可以在这里找到 - Chris Coyier - stroke-dashoffset

您正确地注意到可以使用JS方法计算线的长度 - getTotalLength ()

以下是一个脚本示例，用于打印使用path绘制的数字的路径长度：

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

   

以下是动画的完整示例：

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

如果您需要在一个方向上移动线条的动画，请将alternate替换为forwards

Answer 3

在这种情况下，我认为您无需设置偏移量的动画。在通过零点的情况下以及您不想从零点开始时，可​​能会出现问题。 我将使用2个参数-笔触长度和笔划空间，例如：

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