动画后 SVG 路径发生变化
Posted
技术标签:
【中文标题】动画后 SVG 路径发生变化【英文标题】:SVG path changes after animation 【发布时间】:2015-03-12 18:37:18 【问题描述】:我正在绘制一个采用矩形形式的<path>
,代码如下:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 70 51" enable-background="new 0 0 70 51" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000" stroke-miterlimit="10" d="M18.8,50.5h-7.9V29.7h7.9V50.5z"/>
</svg>
通过以下 CSS 代码使用this method 对其进行动画处理:
svg
max-width: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
svg path
animation: draw 1s linear forwards;
-webkit-animation: draw 1s linear forwards;
stroke-dasharray: 57.4;
stroke-dashoffset: 57.4;
@-webkit-keyframes draw
to
stroke-dashoffset: 0;
@keyframes draw
to
stroke-dashoffset: 0;
fill-opacity: 1;
这里有一个codepen:http://codepen.io/anon/pen/emvWEL
问题在于右下角没有完全连接——也就是说,它不是一个完整的矩形,路径中有一个小间隙。但是,当您移除动画(CSS 的svg path
部分)时,矩形会关闭。
我认为这可能是由于 dasharray 或 dashoffset,但在调整值后,我无法修复它。有什么想法吗?
提前致谢!
【问题讨论】:
您检查过多个浏览器吗?我在 Firefox 中没有注意到问题,但 Chrome 的右下角似乎像你提到的那样柔和。 【参考方案1】:stroke-linecap
的默认值为butt
。
简单添加stroke-linecap="square"
。
Updated CodePen
svg#animated
max-width: 200px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
svg#animated path
animation: draw 1s linear forwards;
-webkit-animation: draw 1s linear forwards;
stroke-dasharray: 57.4;
stroke-dashoffset: 57.4;
@-webkit-keyframes draw
to
stroke-dashoffset: 0;
@keyframes draw
to
stroke-dashoffset: 0;
fill-opacity: 1;
<svg id="animated" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 51" enable-background="new 0 0 70 51" xml:space="preserve">
<path fill="#FFFFFF" stroke="#999" stroke-miterlimit="10" stroke-linecap="square" d="M18.8,50.5h-7.9V29.7h7.9V50.5z" />
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 70 51" enable-background="new 0 0 70 51" xml:space="preserve">
<path fill="#FFFFFF" stroke="#999" stroke-miterlimit="10" d="M18.8,50.5h-7.9V29.7h7.9V50.5z" />
</svg>
或者,您可以稍微增加stroke-dasharray
和stroke-dashoffset
的值,例如58
。
【讨论】:
@user2383338 - 不客气。 :)以上是关于动画后 SVG 路径发生变化的主要内容,如果未能解决你的问题,请参考以下文章