动画后 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-dasharraystroke-dashoffset 的值,例如58

【讨论】:

@user2383338 - 不客气。 :)

以上是关于动画后 SVG 路径发生变化的主要内容,如果未能解决你的问题,请参考以下文章

悬停时的 SVG 不进行过渡

React Native SVG描边动画

轻量级HTML5插件使用jQuery绘制SVG图形轮廓线路径动画教程

[CSS] svg路径动画

SVG 悬停在 Firefox 中不起作用

svg路径蒙版动画