我正在绘制一个<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,但在调整了值后,我无法修复它。有什么想法吗?
提前致谢!
答案 0 :(得分:2)
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
。