动画后 SVG 路径变化
SVG path changes after animation
我正在绘制一个 <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;
}
这里有代码笔:http://codepen.io/anon/pen/emvWEL
问题是右下角没有完全连接 -- 也就是说,它不是一个完整的矩形,路径中有一个小间隙。但是,当您移除动画(CSS 的 svg path
部分时,矩形将关闭。
我以为可能是dasharray 或dashoffset 的问题,但调整了值后,我无法修复它。有什么想法吗?
提前致谢!
stroke-linecap
的默认值为 butt
。
简单添加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>
或者,您可以稍微增加 stroke-dasharray
和 stroke-dashoffset
值,例如 58
.
我正在绘制一个 <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;
}
这里有代码笔:http://codepen.io/anon/pen/emvWEL
问题是右下角没有完全连接 -- 也就是说,它不是一个完整的矩形,路径中有一个小间隙。但是,当您移除动画(CSS 的 svg path
部分时,矩形将关闭。
我以为可能是dasharray 或dashoffset 的问题,但调整了值后,我无法修复它。有什么想法吗?
提前致谢!
stroke-linecap
的默认值为 butt
。
简单添加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>
或者,您可以稍微增加 stroke-dasharray
和 stroke-dashoffset
值,例如 58
.