Html 如何从圆角矩形的上中心进行笔划

我想用SVG制作一个按钮，复制YouTube的自动播放圈。我一直在尝试让笔划从上中开始和结束，但它最好从左上角开始，因为当我开始更改笔划dasharry和笔划dashoffset数字时，它开始在开始或结束时消失。我知道用圆圈会容易得多，但我想看看这是否可行。似乎情况并非如此

svg:hover{ 笔划阵列：1000； 行程偏移量：1000； 动画：向前冲5秒； } @关键帧破折号{ 到{ 笔划偏移：0； } }

---

我不知道是否可以轻松地使用SVG，但我知道我可以使用

div

s和一些好的ol'e风格的CSS包装的伪元素来完成

下一个视频

---

这是HTML。对于CSS，只需单击链接；这有点太长了

无法更改SVG破折号的起始位置

要实现所需，您需要切换到

元素并自己绘制其形状。然后你可以在任何你想去的地方开始这条路

svg:hover{ 笔划阵列：1000； 行程偏移量：1000； 动画：向前冲5秒； } @关键帧破折号{ 到{ 笔划偏移：0； } }

这是默认行为，我不确定是否可以更改。您必须将矩形替换为从正确位置开始的路径。我喜欢此示例，但我正在寻找圆角矩形。我很难将任何边界半径应用于rekt类。您是如何将我的圆角矩形示例转换为路径的？我一直在尝试使用GIMP手工粗略地绘制路径。我是手工绘制的。我熟悉SVG路径语法。这并不难。您可以通过阅读《魔兽世界》自己学习，我不认为编写SVG路径比使用SVG编辑器更可行。非常感谢你！

<div class="cont">
  <div class="rekt"><div class="rekt2"><span>Next Video</span></div></div>
</div>