Как погладить из верхнего центра закругленного прямоугольника

Question

Я хочу сделать кнопку из SVG и воспроизвести круг автозапуска YouTube. Я пытался заставить удар начинать и заканчиваться в топ-центре, но он начнет лучше всего в верхнем левом углу, потому что, когда я начинаю менять инсульт-дашарри и номера штриховки, вокруг него начинает уходить начало или конец. Я знаю, что это будет намного проще с кругом, но я хочу посмотреть, возможно ли это. Кажется, что это не так.

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> и нарисовать его форму самостоятельно. Затем вы можете начать путь туда, где хотите.

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>

Answer 2

Я не знаю, если я мог бы легко сделать это с SVGs, но я знаю, что могу сделать это с div с и псевдо элементы завернутые в некоторой хорошей ol'e вылепленный CSS !

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

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

Вот HTML. Для CSS просто нажмите ссылку; это немного дольше, чем нужно.