html - 如何从圆 Angular 矩形的顶部中心进行描边

我想用SVG制作一个按钮，然后复制YouTube的自动播放圈子。我一直在尝试使笔划在顶部中心开始和结束，但是它最好在左上角开始，因为当我开始更改笔划-dasharry和笔划-dashoffset数字时，它开始于开始或结束。我知道用圆圈会容易得多，但是我想看看是否有可能。似乎开始并非如此。

svg:hover {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="160" height="80">

  <a xlink:href="/next_video" target="_self">
    <rect class="path" height="70" width="130" y="5" x="5" rx="35" stroke="#eee" stroke-width="8px" />
    <rect height="60" width="120" y="10" x="10" rx="30" fill="#00a6bc" />
    <text fill="#eee" text-anchor="middle" y="45" x="70">Next video</text>
  </a>
</svg>

最佳答案

无法更改SVG <rect>的破折号的开始位置。

要实现所需的功能，您需要切换到<path>元素并自己绘制形状。然后，您可以随时随地开始路径。

svg:hover {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="160" height="80">

  <a xlink:href="/next_video" target="_self">
    <path d="M70,5 L100,5 A35,35 0 0 1 100,75 L40,75 A35,35 0 0 1 40,5 Z"
          stroke="#eee" stroke-width="8px" />
    <rect height="60" width="120" y="10" x="10" rx="30" fill="#00a6bc" />
    <text fill="#eee" text-anchor="middle" y="45" x="70">Next video</text>
  </a>
</svg>

关于html - 如何从圆 Angular 矩形的顶部中心进行描边，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38018756/