[英]CSS/SVG stroke animation
I have this circle, will be animated when clicking on the h1. 我有这个圆圈,单击h1时会显示动画。
Everything works ok except that I want that the animatation to start from the bottom to right like: 一切正常,除了我希望动画从下到右开始:
Not from right middle. 不是从右中。
http://jsfiddle.net/zj7w81ss/ http://jsfiddle.net/zj7w81ss/
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="80px" height="80px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215"></circle>
</svg>
How should I do this? 我应该怎么做?
Thanks! 谢谢!
You can rotate your circle using the transform attribute: 您可以使用transform属性旋转圆:
transform="rotate(degrees centerX centerY)"
<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
To change the direction of the line animation you can change you initial stroke-dashoffset
in the CSS to stroke-dashoffset: -39;
要更改线条动画的方向,您可以将CSS中的初始stroke-dashoffset
更改为stroke-dashoffset: -39;
Edit: tested on your fiddle 编辑: 在你的小提琴上测试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.