动画后SVG路径更改 [英] SVG path changes after animation
问题描述
我正在绘制< path>
,它采用矩形形式,并带有以下代码:
< svg版本="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>
使用以下
svg#animated {最大宽度:200像素;位置:绝对;最高:0;左:0;正确:0;底部:0;保证金:自动;}svg#动画路径{动画:绘制1s线性正向;-webkit-animation:绘制1s线性正向;笔划破折号:57.4;笔划破折号:57.4;}@ -webkit-keyframes绘制{到 {笔划破折号:0;}}@keyframes绘制{到 {笔划破折号:0;填充不透明度:1;}
< svg id =动画化" 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
.
I'm drawing in a <path>
which takes the form of a rectangle, with the following code:
<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>
With the following CSS code to animate it using 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;
}
There is a codepen here: http://codepen.io/anon/pen/emvWEL
The problem is that the bottom right corner doesn't quite connect -- i.e., it's not a complete rectangle, and there is a small gap in the path. However, when you remove the animation (the svg path
part of the CSS, the rectangle is closed.
I thought that it might be due to the dasharray or dashoffset, but after adjusting the values, I couldn't fix it. Any thoughts?
Thanks in advance!
The default value for stroke-linecap
is butt
.
Simple add stroke-linecap="square"
.
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>
Alternatively, you could increase the stroke-dasharray
and stroke-dashoffset
values a bit, For Example 58
.
这篇关于动画后SVG路径更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!