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

Question

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

是否有一些更简单/更优雅的方法来使用 CSS（或者可能是 SVG）？
这是状态很少的理想结果图像⇩⇩

Answer 1

纯 svg

画线的效果是利用线的属性stroke-dashoffset实现的，就是从行首开始缩进。

线在stroke-dashoffset有最大值时隐藏，在stroke-dashoffset = "0"

时线完全可见

因此，将stroke-dashoffset的值从max改为0，就得到画线的效果

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

这是一个脚本示例，它打印使用 [=14=] 绘制的图形的路径长度：

<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 个参数 - 笔划长度和笔划 space，例如：

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

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

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

css

svg

border

clip

纯 svg

CSS+SVG