Question

我想从SVG中创建一个按钮并复制YouTube的自动播放圈。我一直试图让中风开始并在顶部中心结束，但它会在左上角开始最好，因为当我开始改变冲程 - dasharry和冲程 - 冲程偏移数字时，它开始在开始或结束。我知道用圆圈会更容易，但我想知道这是否可能。它似乎开始似乎不是。

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>

Answer 1

无法更改SVG <rect>短划线的起始位置。

要实现您想要的效果，您需要切换到<path>元素并自行绘制其形状。然后你可以在任何你想要的地方开始路径。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我不知道我是否可以轻松地使用SVG，但我知道我可以用div和伪元素包裹在一些好的老式CSS中来做到这一点！< / p>

http://codepen.io/anon/pen/WxROry

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

这是HTML。对于CSS，只需单击链接;它比适当的时间长一点。

如何从圆角矩形的顶部中心进行描边

2 个答案: